[英]Jquery div class changes when menu link/links 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;}
如果您看这个小提琴-http: //jsfiddle.net/KUtY5/1/
我想在元素更改时添加过渡时间,并在页面加载时显示第一个元素。 然后,当您单击其他元素时,它们也会相应更改。
有任何想法吗? :(
您全部隐藏了。 准备好文档后,您可以显示第一个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();
});
要显示菜单容器的第一个div,请将其放置在文档就绪处理程序中
$("#menu_container div:first-child").show();
您可以使用fadeIn方法而不是show方法来实现过渡
$("#menu_container #menu_"+id[1]).fadeIn();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.