将简单链接链接到另一个页面的选项卡

时间:2016-10-03 12:20:43

标签: jquery css

我在一个名为 people.html

的网页上有链接
<a href="single.html"><h3>Name1</h3></a>
<a href="single.html"><h3>Name2</h3></a>
<a href="single.html"><h3>Name3</h3></a>
<a href="single.html"><h3>Name4</h3></a>

当我点击其中一个链接时,我想打开(激活)另一个名为 single.html

的页面上的相应标签
<ul class="nav nav-tabs tabs-left sideways">
    <li class="active"><a href="#nameOne" data-toggle="tab" >Name1</a></li>
    <li><a href="#nameTwo" data-toggle="tab">Name2</a></li>
    <li><a href="#nameThree" data-toggle="tab">Name3</a></li>
    <li><a href="#nameFour" data-toggle="tab">Name4</a></li>
</ul>

由于

1 个答案:

答案 0 :(得分:3)

假设您已点击任何锚标记,现在您的网址中的链接会显示为您点击的标签。

"www.xyz.com/page#tab1";

现在加载页面获取网址

var url = window.location.href;

从网址链接中获取激活标签。

 var activeTab = url.substring(url.indexOf("#") + 1);

删除旧的活动标签类

 $(".tab-pane").removeClass("active in");

将活动类添加到新标签页

$("#" + activeTab).addClass("active in");

或者在获得activeTab后直接打开标签。

$('a[href="#'+ activeTab +'"]').tab('show')