根据URL链接使Bootstrap选项卡处于活动状态 [英] Make Bootstrap tab Active on the bases of URL link
问题描述
我有引导程序选项卡,我想基于URL链接使选项卡处于活动状态.
I have bootstrap tabs and i want to make tabs active on the bases of URL link.
例如:
xyz.xxx/index#tab2 应该在页面加载时激活 tab2 .
xyz.xxx/index#tab2 should make tab2 active on page load.
到目前为止,这是我的代码
Here is my code so far
<div class="tab-wrap">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01">Tab 1</a></li>
<li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">Tab 2</a></li>
<li class=""><a href="#tab3" data-toggle="tab" class="analistic-03">Tab 3</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active in" id="tab1">
<p> hello 1</p>
</div>
<div class="tab-pane" id="tab2">
<p> hello 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Hello 3</p>
</div>
</div> <!--/.tab-content-->
</div><!--/.tab-wrap-->
默认情况下,它会使tab1处于活动状态,因此在我的情况下,根据我的URL链接,有可能默认使第二个选项卡处于活动状态.
By default it make tab1 active so there might be possibility in my case to make the second tab active by default on the basis of my URL links.
假设我将#tab2放在URL中,则默认情况下应在页面加载时使tab2处于活动状态.
Suppose if i put #tab2 in URL then it should make tab2 active by default on page load.
推荐答案
您可以使用jquery这样的方法来实现它. 您的网址,例如"www.myurl.com/page#tab1";
You can achieve it using jquery something like this. Your URL for example "www.myurl.com/page#tab1";
var url = window.location.href;
获取标签以从网址链接激活.
Get the tab to make active from url link.
var activeTab = url.substring(url.indexOf("#") + 1);
删除旧的活动标签类
$(".tab-pane").removeClass("active in");
将活动班级添加到新标签页
Add active class to new tab
$("#" + activeTab).addClass("active in");
或在获得activeTab后直接打开标签.
Or directly open tab after getting activeTab.
$('a[href="#'+ activeTab +'"]').tab('show')
这篇关于根据URL链接使Bootstrap选项卡处于活动状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!