Bootsrap Twitter选项卡 - 页面重新加载时转到特定选项卡

我正在开发一个Web应用程序。在我使用Twitter Bootstrap窗格选项卡的某些网页中。下面是我的代码。Bootsrap Twitter选项卡 - 页面重新加载时转到特定选项卡

我想在页面重新加载时转到特定的选项卡。例如：当我在www.mywebsite.com/c.html中时，当我转到'cc'并刷新页面时，第一个活动选项卡是'bc'，它会返回到'bc'。我希望它留在'cc'中。我需要能够做这样的事情www.mywebsite.com/c.html#cc但这不起作用。

我看着Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload?，但找不到适合我的代码的答案。我试图改变类名仍然没有运气。

<div class="wp"> 
    <div class="widget"> 
     <div class="tabs"> 
      <ul class="nav nav-pills nav-justified"> 
       <li class="active"><a href="#bc" data-toggle="tab">bc</a></li> 
       <li><a href="#cc" data-toggle="tab">cc</a></li> 
       <li><a href="#lc" data-toggle="tab">lc</a></li> 
       <li><a href="#pc" data-toggle="tab">pc</a></li> 
       <li><a href="#sc" data-toggle="tab">sc</a></li>           
      </ul> 
     </div> 
    </div> 
</div> 
<div class="tab-content tab-content-inverse"> 
    <div class="tab-pane active" id="bc"> 
     ... 
    </div> 
    <div class="tab-pane" id="cc"> 
     ... 
    </div> 
    <div class="tab-pane" id="lc"> 
     ... 
    </div> 
    <div class="tab-pane" id="pc"> 
     ... 
    </div> 
    <div class="tab-pane" id="sc"> 
     ... 
    </div> 
</div>

来源

2014-11-21 Program_ming

您可以使用JavaScript编写一些代码，将运行在页面加载时，检查URL（window.location.hash）的＃部分。查看bootstrap网站以了解如何切换某个选项卡：http://getbootstrap.com/javascript/#tabs

来源

2014-11-21 17:31:43 curiousinternals

谢谢，我现在就来看看。 – 2014-11-21 17:53:09

除非提问者指定他们使用的是Twitter Bootstrap 2.xx，否则我不会将它们链接到本质上已过时的文档中.... – MattD 2014-11-21 18:00:44

@MattD哦，快点，我很匆忙，并没有意识到我正在看旧网址。感谢您指出了这一点。使用最新的网址编辑。 – curiousinternals 2014-11-21 18:31:54

在JavaScript/jQuery中使用location.hash获取URL的锚点部分。

然后，将其追加到下面的JavaScript：

document.querySelector('.nav li a[href="#lc"]').click();

你只需插入你拉使用的location.hash中的href =部分，然后将被点击后的值。

更改以下Bootply示例中的值并运行它以查看其工作原理。

BOOTPLY

来源

2014-11-21 18:10:53 MattD

我想通了。谢谢你回复我。 – 2014-11-21 18:15:27

这为我工作。我将班级名称更改为选项卡，并将活动更改为单击活动

$(document).ready(function() {    
      var hash = document.location.hash; 
      var prefix = "tab_"; 
      if (hash) { 
       $('.tabs a[href=' + hash.replace(prefix, "") + ']').tab('show'); 
      } 
      $('.tabs a').on('click', function (e) {      
       window.location.hash = e.target.hash.replace("#", "#" + prefix); 
      }); 
    });

来源

2014-11-21 18:12:38

Bootsrap Twitter选项卡 - 页面重新加载时转到特定选项卡

回答

相关问题