當單擊菜單鏈接時，jQuery div類發生更改

Question

我需要初始框在加載時可見，而不僅僅是單擊菜單項時可見。

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/

我想在元素更改時添加過渡時間，並在頁面加載時顯示第一個元素。 然后，當您單擊其他元素時，它們也會相應更改。

有任何想法嗎？ :(

Answer 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();
    });

Answer 2

要顯示菜單容器的第一個div，請將其放置在文檔就緒處理程序中

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

您可以使用fadeIn方法而不是show方法來實現過渡

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

這是您想要的工作演示