Avatar of PRRcomputers
PRRcomputers
Flag 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?
CSSJavaScriptHTMLjQueryWeb Languages and Standards

Avatar of undefined
Last Comment
PRRcomputers

8/22/2022 - Mon
Jon Norman

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

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
Jon Norman

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
PRRcomputers

ASKER
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!
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes