smfmetro10
asked on
how do you make a tab be "active" based on a url
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!
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>
ASKER
Thanks for the reply!
I forgot to mention that I also need the corresponding div to show as well.
Is that possible?
Thanks
I forgot to mention that I also need the corresponding div to show as well.
Is that possible?
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Outstanding! Thanks!
$("a[href='"+location.hash