Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 224
  • Last Modified:

how do you make a <li> active and show a div based on the url?

Hi,

I have a ul nav system for a contact page that works but i need to make the general tab in the active state when the url is contact/index.html.

This is what I have so far.

Thanks for the Help!

<script type="text/javascript">
	$(document).ready(function(){
		$(".label_copy").hide(); // Hide all tab content divs by default
		$("a[href='"+location.hash+"']").closest("li").addClass("active");
         $(location.hash).show();	
		$(".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
			$(".label_copy").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>	
<style>
.contact_nav {
text-align:left;
margin-left:-30px;
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:100px;
	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
}

.label_copy {
margin-left:25px;
width:650px;
}
</style>


<div id="contact_nav" class="contact_nav" style="width:685px;">
	<ul style="width:685px;">
    	<li id="6"><a href="#general">General Information</a></li>
    	<li id="7"><a href="#member">Member Services</a></li>
    	<li id="8"><a href="#patient">Patient Safety</a></li>
        <li id="10"><a href="#press">Press Inquiries</a></li>
        <li id="1"><a href="#web">Website Feedback</a></li>
    </ul>
   
  <div id="member" class="label_copy">
 <p>Member info.</p>
    </div>
     <div id="web" class="label_copy">
 <p>Web info</p>
    </div>
 <div id="general" class="label_copy">
 <p>General info.</p>
    </div>
<div id="patient" class="label_copy">
 <p>Patient info.</p>
 </div>
 <div id="press" class="label_copy">
 <p>Press info</p>
 </div>
    </div>

Open in new window

0
smfmetro10
Asked:
smfmetro10
  • 2
1 Solution
 
GaryCommented:
<script type="text/javascript">
	$(document).ready(function(){
		$(".label_copy").hide(); // Hide all tab content divs by default
		lhash=location.hash
		if(lhash==""){
			lhash="#general"
		}

		$("a[href='"+lhash+"']").closest("li").addClass("active");
		$(lhash).show();	

		$(".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
			$(".label_copy").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>

Open in new window

0
 
duncanb7Commented:
I have a ul nav system for a contact page that works but i need to make the general tab in the active state when the url is contact/index.html.

This is what I have so far.

What is your question, could you write it more in detail and step by  step for viewer ?

Please see attachment, no any console error from developer tools


Duncan
e4.php
0
 
smfmetro10Author Commented:
Once again Gary you have saved me! I think I owe you one of those cans of Duff!!

Thanks again!
0
 
GaryCommented:
:o)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now