升级simple-show/hide jQuery:显示第一个内容+粗体导航项

Question

由于我刚开始学习jquery，我希望有人能帮我解决这个问题：我有一个代码，当选择导航项目时，它会隐藏/显示内容。所选导航项目也设置为粗体。

现在我想升级它，这样：

a.） 在选择任何导航项目之前，第一个内容（menu_apps）是可见的

b.） 相应的第一个导航项（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(){
   		$("#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();
   });
});

#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>