Link to home
Start Free TrialLog in
Avatar of PRRcomputers
PRRcomputersFlag for United States of America

asked on

CSS Tab, Switch on Page Load based on URL fragment (#hashtag)

I've got some CSS tabs which are switching via Javascript when clicked. That part is working just fine.  Now, I'd like to have someone land on the page and be taken to a particular tab if they have the appropriate #fragment at the end of their URL.  For example, if they visit www.example.com/index.html they will get the first (default) tab, but if they visit www.example.com/index.html#tab2 they'll get Tab 2.  That kind of thing.

Tabs are switching beautifully on click, now I just need to tweak this to get the page to activate a particular tab when a particular #hashtag (like above) is used.  I feel like I've done this before, but I'm totally drawing a blank on how.

HTML - the clickable tab headers
<ul class="tabs">
     <li class="active"><a href="#tab1">Tab 1</a></li>
     <li><a href="#tab2">Tab 2</a></li>
     <li><a href="#tab3">Tab 3</a></li>
     <li><a href="#tab4">Tab 4</a></li>
</ul>

Open in new window


HTML - the tabs themselves
<div class="tab_container">
     <div id="tab1" class="tab_content">
          ... stuff ...
     </div>
     etc. etc.

Open in new window


tabs.js
$(document).ready(function() {
&#9;
&#9;//When page loads...
&#9;$(".tab_content").hide(); //Hide all content
&#9;$("ul.tabs li:first").addClass("active").show(); //Activate first tab
&#9;$(".tab_content:first").show(); //Show first tab content

&#9;//On Click Event
&#9;$("ul.tabs li").click(function() {
&#9;
&#9;&#9;$("ul.tabs li").removeClass("active"); //Remove any "active" class
&#9;&#9;$(this).addClass("active"); //Add "active" class to selected tab
&#9;&#9;$(".tab_content").hide(); //Hide all tab content
&#9;
&#9;&#9;var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
&#9;&#9;$(activeTab).fadeIn(); //Fade in the active ID content
&#9;&#9;return false;
&#9;});
&#9;
&#9;});

Open in new window


Can I modify the "When page loads..." section of the Javascript so it activates "tab2" if someone arrives on this page with #tab2 on the end of their URL?  If so, how?
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

This looks like jQuery so should be in the jQuery topic.


The solution should be:

$(document).ready(function() {
	
	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {
	
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
	
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});
        $("a[href=\""+location.hash+"\"").parent("ul.tabs li").click();
});

Open in new window

Avatar of PRRcomputers

ASKER

Thanks for the response, but that doesn't seem to work.  With that code in place, visiting www.example.com/index.html#tab2 still doesn't open the page with "tab2" active / out front.

I'm still learning JQuery - what was that additional line intended to do?  Is it supposed to simulate a click on a tab based on the hash in the URL?
SOLUTION
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland 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
ASKER CERTIFIED SOLUTION
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
Exactly what I needed, thank you Jon.  The only modification I made to your lower overhead solution was I added one more .removeClass("active") to darken the first tab when another is selected by hash.  It all works brilliantly, thank you so much!