Question

在Bootstrap 3中，我已经将选项卡栏移植到了侧边栏。在我的TabBar中，标签的定义如下

<nav class="navbar navbar-default navbar-fixed-top">
    <ul class="nav nav-tabs navbar-center">
        <li role="presentation" class="active"><a href="#panel_A" name="panel_A" data-toggle="tab">Panel A</a></li>
        <li role="presentation" class="active"><a href="#panel_B" name="panel_B" data-toggle="tab">Panel B</a></li>
    </ul>
</nav>

并处理选项卡更改，我有一个获取活动选项卡的功能：

function getActiveTab() {
        var hash = document.location.hash;
        var prefix = "tab_";
        activeTab = hash.replace(prefix, "").replace("#", "");
        return activeTab;
    }//getActiveTab

和注册选项卡更改事件的功能：

function registerHandlerOnTabChange(activeTab, callback) {
    // handle tab change
    var hash = document.location.hash;
    var prefix = "tab_";
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        activeTab = e.target.name;
        window.location.hash = e.target.hash.replace("#", "#" + prefix);
        if (typeof (callback) != 'undefined') callback.apply(this, [e]);
    });
    if (hash) {
        activeTab = hash.replace(prefix, "");
        $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
    }
}//registerHandlerOnTabChange

这很好，当更改选项卡时，URL哈希值将更改，并且将显示选项卡内容。标签内容由标签名称定义，例如

<div class="tab-content col-md-offset-0 col-md-12">
  <div class="tab-pane active" id="panel_A"></div>
  <div class="tab-pane" id="panel_B"></div>
</div>

现在，当移植到侧边栏时，我的侧边栏标签看起来像

<ul class="nav nav-pills nav-stacked">
    <ul >
        <li class="active" role="presentation" ><a href="#panel_A" name="panel_A" data-toggle="tab">Panel A</a></li>
        <li class="" role="presentation" ><a href="#panel_B" name="panel_B" data-toggle="tab">Panel B</a></li>
     </ul>
 </ul>

我要做的就是使选择器从nav-tabs更改为nav-pills。

$('.nav-tabs a[href="' + activeTab + '"]').tab('show');

到

$('.nav-pills a[href="' + activeTab + '"]').tab('show');

我认为这不是处理选项卡栏中选项卡项目的正确方法。还有更好的选择吗？

Boostrap 3将TabBar移植到SideBar

0 个答案: