#it​​em没有移动标签 - bootstrap

Question

我在查找标签系统在引导程序中的工作方式时遇到了一些麻烦。

我有以下代码：

    <div class="tabbable-line">
                <ul class="nav nav-tabs ">
                    <li class="active">
                        <a href="#standings" data-toggle="tab">
                        Standings </a>
                    </li>
                    <li>
                        <a href="#find_match" data-toggle="tab">
                        Find Match </a>
                    </li>
                    <li>
                        <a href="#rules" data-toggle="tab">
                        Rules </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="standings">
                        <p>First Tab</p>
                    </div>
                    <div class="tab-pane" id="find_match">
                        <p>Second Tab</p>
                    </div>
                    <div class="tab-pane active" id="rules">
                        <p>Third Tab</p>
                    </div>
                </div>
     </div>

这使用锚点在标签之间导航，对吗？那么如何通过输入http://url.com/#rules

来转到第三个选项卡

当我尝试这个时，它不起作用。

任何帮助都将受到高度赞赏！

Answer 1

Bootstrap不使用href属性来导航选项卡。它仅指我们点击标签时要显示的div的ID。 在bootstrap JS中，只需搜索 data-toggle =“tab”和 Tab.prototype.show ，您就可以了解标签在引导程序中的工作原理。

Answer 2

在这种情况下，Twitter bootrap对你没有任何帮助。您可以在页面中插入一些脚本：

$(function() {
  $('.tabbable-line [href="' + location.hash + '"]').tab('show');
});

Answer 3

我们可以根据网址和点击更新网址使用此代码进行导航标签。

$('.nav-tabs li [href="' + location.hash + '"]').tab('show');

$('.nav-tabs li a').click(function(){
    window.location.hash = $(this).attr('href');
});