Question

我正在尝试添加链接到页面顶部以访问数据选项卡，以及它们在Twitter Bootstrap示例的常规选项卡部分中工作。

我通过Bootstrap有以下基本选项卡：

<ul class="nav nav-tabs">
    <li><a href="#news" data-toggle="tab" class=""><span class="glyphicon glyphicon-comment"></span> Latest News</a>
    </li>
    <li><a href="#people" data-toggle="tab" class=""><span class="glyphicon glyphicon-user"></span> The People</a>
    </li>
    <li><a href="#agenda" data-toggle="tab" class=""><span class="glyphicon glyphicon-calendar"></span> Agenda</a>
    </li>
    <li><a href="#messages" data-toggle="tab" class=""><span class="glyphicon glyphicon-plane"></span> Accommodations</a>
    </li>
    <li><a href="#faq" data-toggle="tab" class=""><span class="glyphicon glyphicon-comment"></span> FAQ</a>
    </li>
</ul>
<!-- End tabs -->

此处的内容示例：

<div class="tab-content">
    <div class="tab-pane active" id="news">
        <div class="span5">
            <ul class="green-checks">
                <li>
                    <div class="panel panel-info">Information coming soon!</div>
                </li>
                <!--<li><cite>May 24, 2013 &mdash; </cite>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>-->
            </ul>
        </div>

我要做的是通过标题导航以及标签部分本身调用标签。复制这样的代码是行不通的：

<li class="menu-item"><a href="#people" data-toggle="tab" class="">The People</a></li>

Answer 1

修改 - 已更新，以便在点击后滚动到标签页。

通过click()模拟制表符切换：

function tabClick(tab) {
    $('a[href='+tab+']').click();
    $(tab).animate({scrollTop:0}, 'fast');
}

...

<li class="menu-item">
   <a href="#" onclick="tabClick('#people');return false;" data-toggle="tab" class="">The people</a>
</li>

从多个位置调用Bootstrap选项卡

1 个答案: