当菜单链接/链接点击时，jquery div class发生变化

Question

我需要初始框在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/

我想补充一个过渡时间wh元素更改以及在页面加载时显示第一个元素。然后当你点击其他元素时，它们会相应地改变。

任何想法？ :(

Answer 1

显示菜单容器的第一个div，把这个在你的文件准备好处理

$("#menu_container div:first-child").show(); 

您可以使用淡入方法，而不是节目的方法来实现过渡

$("#menu_container #menu_"+id[1]).fadeIn(); 

Heres a working demo of what you wanted

Answer 2

你隐藏它们。您可以显示第一个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(); 
    });