升級簡單的顯示/隱藏jQuery：顯示第一個內容+大膽的導航項目

Question

由於我在學習jQuery的一開始，我希望有人可以幫我解決這個問題：我有一個隱藏/顯示內容時的代碼導航項目被選中。所選的導航項目也被設置爲粗體。

現在我想將它升級，以便：。選擇

B中所述的導航項目之前

一）第一內容（menu_apps）是可見的）將相應的第一個nav-item（show_apps）設置爲粗體，以便人們可以看到它已鏈接到可見內容。

我一直試圖讓它工作，但每次都失敗。真的好奇看到解決方案。謝謝你的時間！

代碼：http://jsfiddle.net/KUtY5/489/

JS

$(document).ready(function(){ 
    $("#nav a").click(function(){ 
     $("#nav a").css("font-weight", 400); // First you make them thin 
     $(this).css("font-weight", 800); // Than you make them bold 
      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; 
} 

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> 

Answer 1

在這裏，我已經更新了你的代碼有點檢查出來 http://jsfiddle.net/KUtY5/493/ 我已經添加了這些線路上的文檔準備

$("#menu_apps").show(); 
$("#show_apps").css("font-weight", 400); // First you make them thin 
$('#show_apps').css("font-weight", 800); 

Answer 2

試試這個：

$(document).ready(function(){ 
$("#nav a").click(function(){ 
$("#nav a").css("font-weight", 400); // First you make them thin 
$(this).css("font-weight", 800); // Than you make them bold 
    var id = $(this).attr('id'); 
    id = id.split('_'); 
    $("#menu_container div").hide(); 
    $("#menu_container #menu_"+id[1]).show(); 
}); 
    $("#nav a:first").css("font-weight", 800); 
}); 

Answer 3

它會爲你工作..謝謝。

$(document).ready(function(){ 
 
$("#menu_container div").hide(); 
 
$("#menu_container #menu_"+'apps').show(); 
 
$("#show_apps").css("font-weight", 800); 
 

 
    $("#nav a").click(function(){ 
 
    \t \t $("#nav a").css("font-weight", 400); // First you make them thin 
 
    \t $(this).css("font-weight", 800); // Than you make them bold 
 
      var id = $(this).attr('id'); 
 
     id = id.split('_'); 
 
     $("#menu_container div").hide(); 
 
     $("#menu_container #menu_"+id[1]).show(); 
 
    }); 
 
});

#menu_container{ 
 
    width: 650px; 
 
    height: auto; 
 
    padding-left: 30px; 
 
} 
 

 
#menu_container div{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>