Solved

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

Posted on 2014-07-25
4
200 Views
Last Modified: 2014-07-25
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
Comment
Question by:smfmetro10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40220139
<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
 
LVL 13

Expert Comment

by:duncanb7
ID: 40220141
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
 

Author Closing Comment

by:smfmetro10
ID: 40220174
Once again Gary you have saved me! I think I owe you one of those cans of Duff!!

Thanks again!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40220179
:o)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

728 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