當菜單鏈接/鏈接點擊時，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(); 
    });