Solved

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

Posted on 2014-07-18
2
78 Views
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

<html>
<head>
	<meta charset="utf-8">
	<title>jQuery Tab</title>
    <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 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
		});
	});
</script>
    <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;

}
</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 -->
	
</body>
</html>

Open in new window

0
Comment
Question by:smfmetro10
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40205755
<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>
    <style>
.contact_nav ul li {
cursor:pointer
}

Open in new window

0
 

Author Closing Comment

by:smfmetro10
ID: 40209530
Thank you so much!
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

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.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

816 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

13 Experts available now in Live!

Get 1:1 Help Now