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

Activate a Tab using a link elsewhere on the page

本文关键字：链接 激活 选项 位置 其他      更新时间：2023-09-26

我在我的HTML页面中使用了Bootstrap Tabs。

这是 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>

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

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

使用引导文档中的信息：

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

您可以使用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>
相关文章：