How do you make a UL nav that hides and shows divs?

Posted on 2014-07-18
Last Modified: 2014-07-21
Hi I have a  UL nav that is close to working but I can't figure out a couple things.

I would like when the user clicks on <li> that the active state is the same as the hover state (grey background, black text) and the whole li is clickable (not just the href part (text)

Thanks for the Help!

Here is my code for better clarification

	<meta charset="utf-8">
	<title>jQuery Tab</title>
    <script type="text/javascript" src="//"></script>
<script type="text/javascript">
		$(".tabContents").hide(); // Hide all tab content divs by default
		$(".contact_nav ul li a").click(function(){ //Fire the click event
			var activeTab = $(this).attr("href"); // Catch the click link
			$(".contact_nav ul li a").removeClass("active"); // Remove pre-highlighted link
			$(this).addClass("active"); // set clicked link to highlight state
			$(".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
.contact_nav {
.contact_nav li{
    display: inline-block;
    text-align: left;
    margin: 0px 6px 5px 0px;
    padding: 10px 15px 5px 5px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

.contact_nav li:hover{
    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;

.contact_nav {
.contact_nav a {



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

Open in new window

Question by:smfmetro10
LVL 58

Accepted Solution

Gary earned 500 total points
ID: 40205755
<script type="text/javascript">
		$(".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
.contact_nav ul li {

Open in new window


Author Closing Comment

ID: 40209530
Thank you so much!

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

867 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

21 Experts available now in Live!

Get 1:1 Help Now