Question

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

现在我想升级它，以便：

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

b。） 相应的第一个导航项（show_apps）设置为粗体，以便人们可以看到它链接到可见内容。

我一直试图让它发挥作用，但每次都失败了。真的很好奇看到解决方案。谢谢你的时间！

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

试试这个：

$(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 2

它会对你有用..谢谢。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这里我已经更新了你的代码，请查看一下 http://jsfiddle.net/KUtY5/493/ 我已在您准备好的文档中添加了这些行

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.namrata.login">

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/AppTheme.NoActionBar">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity
        android:name=".Login"
        android:label="@string/title_activity_login"
        android:theme="@style/AppTheme.NoActionBar" />
    <activity
        android:name=".Register"
        android:label="@string/title_activity_register"
        android:theme="@style/AppTheme.NoActionBar"></activity>
</application>

升级简单显示/隐藏jQuery：显示第一个内容+粗体导航项

3 个答案: