Velimir Lazarevic Velimir Lazarevic - 9 months ago 33
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>



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


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')