I need the initial box to be visible onload and not just when a menu item is clicked.
HTML:
<div id='nav'>
<a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a
id="show_entrees">Entrees</a>
</div>
<div id="menu_container">
<div id="menu_apps">
Content of the App Section Here
</div>
<div id="menu_soups">
Content of the Soups Section Here
</div>
<div id="menu_entrees">
Content of the Entrees Section Here
</div>
</div>
Jquery:
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #menu_"+id[1]).show();
});
});
CSS:
#menu_container{
width: 650px;
height: auto;
padding-left: 30px;
}
#menu_container div{display:none;}
If you look at this fiddle - http://jsfiddle.net/KUtY5/1/
I'd like to add a transition time when the elements change as well as display the first element on page load. Then when you click on the other elements, they change accordingly.
Any ideas? :(
You hide them all. You can show the first div when doc is ready.
$(document).ready(function(){
$("#nav a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #menu_"+id[1]).show();
});
$('#menu_apps').show();
});
To show the first div of the menu container, place this in your document ready handler
$("#menu_container div:first-child").show();
You can use the fadeIn method instead of the show method to achieve a transition
$("#menu_container #menu_"+id[1]).fadeIn();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.