在页面的其他地方使用 link 激活标签

Question

我在 HTML 页面中使用 Bootstrap 标签。

这是 HTML 代码。我试图通过显式 a 元素激活 #descr 选项卡，但它位于 nav-tabs 结构之外。知道怎么做。

<a href="#descr">Read More</a>

<ul class="nav nav-tabs">
    <li class="active"><a href="#specs" data-toggle="tab">Specification</a></li>
    <li><a href="#descr" data-toggle="tab">Description</a></li>
</ul>

<div class="tab-content">
    <!--Tab1 (Tech Specs)-->
    <div class="tab-pane fade in active" id="specs">
        HELLO
    </div>

    <!--Tab2 (Description)-->
    <div  class="tab-pane fade" id="descr">
        <div class="container">
            <div class="row">

            <div class="col-lg-8 col-md-7 col-sm-7">
                <p class="p-style2">Description</p>

            </div>
        </div>
    </div>
</div>

Answer 1

您可以使用 CSS、JS 或两者来实现此目的。但不只是 HTML。

话说回来，这个问题已经回答了好几次了，我就不深究了。但这里有一个使用 jQuery 的工作示例：http://jsfiddle.net/R85tE/293/

$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#nav li').click(function() {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
    $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});

<div id="tabmenu">

    <ul id="nav">
        <li><a href="#" class="active">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    <div id="tab-content">

        <div id="tab1">
            <p>This is a very simple jQuery tabbed navigation.</p>
        </div>

        <div id="tab2">
            <p>This can contain anything.</p>
        </div>

        <div id="tab3">
            <p>Like photos:</p><br />
            <img src="http://www.catname.org/images/cat04.jpg" alt=""/>
        </div>

        <div id="tab4">
            <p>Or videos:</p><br />
            <iframe width="250" height="180" src="http://www.youtube.com/embed/TZ860P4iTaM" frameborder="0" allowfullscreen></iframe>
        </div>

    </div>

</div>

Answer 2

如果您为 a 标签提供一个 ID（或通过其他方式选择它），则可以使用点击处理程序通过 [=19= 调用 bootstrap 标签功能]:

<a id="manualTab" href="#">Read More</a>

使用来自 bootstrap docs 的信息：

$('#manualTab').click(function(e) {
    $('li a[href="#descr"]').tab('show')
    e.preventDefault();
});

在页面的其他地方使用 link 激活标签

Activate a Tab using a link elsewhere on the page

html

javascript

twitter-bootstrap