Velimir Lazarevic Velimir Lazarevic - 2 months ago 10
CSS Question

Linking simple link to tab from another page

I have links on one page that is called 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>


When I click on one of this links I want to open (make active) corresponding tab that is on another page called 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>


Thanks

Answer

Suppose you have clicked any anchor tag and now in your URL the links appears like this with the tab you have clicked.

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

Now on load of the page get the URL

var url = window.location.href;

Get the tab to make active from url link.

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

Remove old active tab class

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

Add active class to new tab

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

Or directly open tab after getting activeTab.

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