Link to home
Start Free TrialLog in
Avatar of Aleks
AleksFlag for United States of America

asked on

Open page on tab # 2 using bootstrap

I am linking to a page that uses tabs (Bootstrap). By default it always opens on tab # 1, for the most part this is ok, but for this particular link I want for it to open on tab# 2

This is my link:

links_index.asp?caseid=<%=(rs_case.Fields.Item("Id").Value)%>

This is the code for the tabs:

    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#tab-1">Users</a></li>
      <li class=""><a data-toggle="tab" href="#tab-2">Sponsoring Employer</a></li>
    </ul>
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Can you put a hash at the end?

links_index.asp?caseid=<%=(rs_case.Fields.Item("Id").Value)%>#tab-2

Then add some jQuery to switch the tabs on document ready.
$(function(){
	var url = document.location.toString();
	if (url.match('#')) {
		$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
	} 
});

Open in new window

Avatar of Aleks

ASKER

It works, moves the page to tab# 2 ... the only problem I find is that it also scrolls the page all the way down, can this be avoided ?
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Aleks

ASKER

Perfect ! You da man  :)
Avatar of Aleks

ASKER

Perfect !
Glad it worked for you. Thanks for the points.