Solved

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

Posted on 2014-07-18
2
76 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
Comment Utility
<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
Comment Utility
Thank you so much!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
What does this javascript do? 7 23
addressing a specific html page 9 19
Problem to page 4 17
Cordova Camera plugin fails 2 15
This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 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

18 Experts available now in Live!

Get 1:1 Help Now