html - Simple Nav Issue involving jQuery's .show() function -
hi have mini nav how make example if click on #hog , #cat (#green) showing show #red (#hog) if click on #hog , #red showing hide #red, sorry don't know how explain better hope understand mean, sorry :-)
<!doctype html> <html lang="en"> <head> <title>toggle</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <h1>hog</h1> <div id="container"> <div id="menu"> <div id="hog"></div> <div id="dog"></div> <div id="cat"></div> <div id="red"></div> <div id="blue"></div> <div id="green"></div> </div> </div> <script src="jquery-1.8.3.js"></script> <script src="main.js"></script> </body> </html>
my css:
#container { width: 30em; height: 20em; background-color: #ccc; position: relative; } #hog { width: 10em; height: 10em; background-color: red; float: left; display: block; } #dog { width: 10em; height: 10em; background-color: blue; float: left; display: block; } #cat { width: 10em; height: 10em; background-color: green; float: left; display: block; } #red { width: 30em; height: 10em; background-color: red; clear: both; display: none; } #blue { width: 30em; height: 10em; background-color: blue; clear: both; display: none; } #green { width: 30em; height: 10em; background-color: green; clear: both; display: none; }
my javascript:
$(function() // run after page loads { $("#hog").toggle(function() { // first click hides login form, shows password recovery $("#red").show(); $("#blue").hide(); $("#green").hide(); }, function() { // next click shows login form, hides password recovery $("#red").show(); $("#blue").hide(); $("#green").hide(); }); }); $(function() // run after page loads { $("#dog").toggle(function() { // first click hides login form, shows password recovery $("#red").hide(); $("#blue").show(); $("#green").hide(); }, function() { // next click shows login form, hides password recovery $("#red").hide(); $("#blue").show(); $("#green").hide(); }); }); $(function() // run after page loads { $("#cat").toggle(function() { // first click hides login form, shows password recovery $("#red").hide(); $("#blue").hide(); $("#green").show(); }, function() { // next click shows login form, hides password recovery $("#red").hide(); $("#blue").hide(); $("#green").show(); }); });
Comments
Post a Comment