Question

我在HTML页面中使用Bootstrap Tabs。

这是HTML代码。我尝试通过显式#descr元素激活a标签，但是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

如果您为a标记提供ID（或者使用其他方式选择它），则可以使用单击处理程序通过JavaScript调用引导标签功能：

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

使用bootstrap docs：

中的信息

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

Answer 2

您可以使用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>

使用页面上其他位置的链接激活选项卡

2 个答案: