Solved

how do you make a tab be "active" based on a url

Posted on 2014-07-22
4
194 Views
Last Modified: 2014-07-22
Hi,

I have a <ul> tab that works but I would like the tab to start as "active" based on the url. So if you come to the page from ...#web or ...#press it would highlight the appropriate tab.

Here is my code:

Thanks for the help!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery Tab</title>
<style>
.contact_nav {
text-align:left;
margin-left:5px;
margin-top:5px;
width:705px;
}
.contact_nav li{
    display: inline-block;
    text-align: left;
    list-style-type:none;
    background-color:#417DBE;
    margin: 0px 6px 5px 0px;
    padding: 10px 15px 5px 5px;
	width:105px;
	height:75px;
	color:#FFF;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.contact_nav li:hover{
	background-color:#CCC;
	height:75px;
    padding: 10px 15px 5px 5px;

}
.contact_nav li:hover a {
 color: #000;
 }
.contact_nav li a{
    text-decoration: none;
    color: #FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
	line-height:1.5em;  
}

.contact_nav li.active {
background-color:#ccc;
color:#000000;
}
.contact_nav li.active a {
color:#000000;

}
.contact_nav ul li {
cursor:pointer
}
</style>
</head>

<body>
<div class="contact_nav" style="width:685px;">
	<ul style="width:685px;">
    	<li><a class="active" href="#general">General Information</a></li>
    	<li><a href="#member">Member Services</a></li>
    	<li><a href="#patient">Patient Safety</a></li>
        <li><a href="#press">Press Inquiries</a></li>
        <li><a href="#web">Website Feedback</a></li>
    </ul><!-- //Tab buttons -->
    <div class="tabDetails">
    	<div id="general" class="tabContents">
      <p>General info</p>
        </div><!-- //tab1 -->
    	<div id="member" class="tabContents">
        	
    <p>Member Info</p>
        </div><!-- //tab2 -->
    	<div id="patient" class="tabContents">
        <p>Patient Info</p>
        </div><!-- //tab3 -->
        <div id="press" class="tabContents">
         <p>Press Info</p>
        </div><!-- //tab4 -->
        <div id="web" class="tabContents">
      
            <p>Web Info</p>
        </div><!-- //tab3 -->
    </div><!-- //tab Details -->
	
</div><!-- //Tab Container -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".tabContents").hide(); // Hide all tab content divs by default
		
		
		$(".contact_nav ul li").click(function(){ //Fire the click event
			$(".contact_nav ul li").removeClass("active");
			$(this).closest("li").addClass("active"); // Remove pre-highlighted link
			var activeTab = $("a",this).attr("href"); // Catch the click link
			$(".tabContents").hide(); // hide currently visible tab content div
			$(activeTab).fadeIn(); // show the target tab content div by matching clicked link.
			return false; //prevent page scrolling on tab click
		});
	});
</script>	
</body>
</html>

Open in new window

0
Comment
Question by:smfmetro10
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Add to your ready function

$("a[href='"+location.hash+"']").closest("li").addClass("active")
0
 

Author Comment

by:smfmetro10
Comment Utility
Thanks for the reply!
I forgot to mention that I also need the corresponding div to show as well.
Is that possible?

Thanks
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
$("a[href='"+location.hash+"']").closest("li").addClass("active");
$(location.hash).show();

Open in new window

0
 

Author Closing Comment

by:smfmetro10
Comment Utility
Outstanding! Thanks!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now