我正在开发一个网页,其中我使用Twitter的引导框架和他们的引导标签JS。它的工作很好,除了一些小问题,其中之一是我不知道如何直接从外部链接到一个特定的选项卡。例如:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

当从外部页面点击链接时,应该分别转到Home选项卡和Notes选项卡


当前回答

你可以在相应的TAB链接上触发一个点击事件:

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});

其他回答

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

这段来自http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768的代码非常适合我。

尝试了上面讨论的几种方法,最终得到了以下工作解决方案,只需在编辑器中复制并粘贴即可。要测试,只需更改哈希到收件箱,发件箱,撰写在url和按enter键。

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

希望这能节省你的时间。

下面是我所做的,非常简单,并且提供你的标签链接有一个与它们相关的ID,你可以获得href属性,并将其传递给显示标签内容的函数:

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

然后在你的url中,你可以像这样添加散列:#tab_tab1, 'tab_'部分从散列本身中删除,因此在nav-tabs (tabid1)中实际的标签链接的ID被放在后面,所以你的url看起来像:www.mydomain.com/index.php#tab_tabid1。

这对我来说是完美的,希望它能帮助其他人:-)

虽然提供的JavaScript解决方案可以工作,但我采用了稍微不同的方式,不需要额外的JavaScript,但需要视图中的逻辑。你可以用一个标准的URL参数创建一个链接,比如:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

然后,只需检测activeTab的值,在相应的<li>中写入'class="active"'

伪代码(在您的语言中相应地实现)。注意,如果本例中没有提供参数,我已经将'home'选项卡设置为默认活动。

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

我提出了一个解决方案,使用url哈希或localStorage取决于后者的可用性,代码如下:

$(function(){
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    })

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});