我需要将初始框显示为onload,而不仅仅是在单击菜单项时。
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;}
如果你看这个小提琴 - http://jsfiddle.net/KUtY5/1/
我想在元素更改时添加转换时间,并在页面加载时显示第一个元素。然后,当您单击其他元素时,它们会相应地更改。
有什么想法吗? :(
答案 0 :(得分:0)
你隐藏它们。当doc准备就绪时,您可以显示第一个div。
$(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();
});
答案 1 :(得分:0)
要显示菜单容器的第一个div,请将其放在文档就绪处理程序
中$("#menu_container div:first-child").show();
您可以使用fadeIn方法而不是show方法来实现转换
$("#menu_container #menu_"+id[1]).fadeIn();