Onclick 功能以顯示菜單中的特定元素

Question

當我點擊左側導航欄中的元素（MMA）時，我希望它顯示在頁面上，而當我點擊導航中的其他元素（裝箱）時，我希望顯示它，例如標簽。

我試過但無法讓它工作，這是我的代碼：

HTML：

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Startsida</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>

                    <!-- header -->
    <div class="jumbotron">
        <h1>Top five facts about different martial arts</h1>
    </div>

                  <!-- Top navigation -->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
        </div>
        <ul class="nav navbar-nav">
          <li ><a href="#">Start</a></li>
          <li class="active"><a href="#">Martial arts</a></li>

        </ul>
      </div>
    </nav>

                    <!-- side navigation -->
    <div class="row" id="row">
      <div class="col-sm-3" "col-lg-2" id="menu" >
        <div class="sidebar-nav" "list-group">
          <div class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <h1 class="head">Martial arts:</h1>
            </div>
            <div class="navbar-collapse collapse sidebar-navbar-collapse">
            <h3 class="side">Martial arts:</h3>
              <ul class="nav navbar-nav" id="ul">

                <a href="#" class="list-group-item  text-center">MMA</a>
                <a href="#" class="list-group-item active text-center">Boxing</a>
                <a href="#" class="list-group-item text-center">Muay thai</a>
                <a href="#" class="list-group-item text-center">Kickboxing</a>
                <a href="#" class="list-group-item text-center">Takwando</a>
                <a href="#" class="list-group-item text-center">Karate</a>
                <a href="#" class="list-group-item text-center">Braziliansk jijutsu</a>
                <a href="#" class="list-group-item text-center">Wrestling</a>
              </ul>
            </div>
          </div>
        </div>
      </div>

                    <!-- Main content -->

           <div class=" col-sm-9  menu-tab">

              <div class="menu-tab-content ">
                <h1>Top 5 fact about MMA</h1>
              </div>

              <div class="menu-tab-content active">
                <h1>Top 5 fact about Boxing</h1>
              </div>

          </div>
  </body>
  </html>

查詢：

  $(document).ready(function() {
      $("div#menu>div.sidebar-nav>a").click(function(e) {
          e.preventDefault();
          $(this).siblings('a.active').removeClass("active");
          $(this).addClass("active");
          var index = $(this).index();
          $("div.menu-tab>div.menu-tab-content").removeClass("active");
          $("div.menu-tab>div.menu-tab-content").eq(index).addClass("active");
      });
  });

Answer 1

你的選擇器是錯誤的。 div#menu>div.sidebar-nav>a查找a ，它是div.sidebar-nav的直接子div.sidebar-nav 。 但是在你的 HTML 中， a嵌套在它下面幾層，所以它應該是div#menu>div.sidebar-nav a

 $(document).ready(function() { $("div#menu>div.sidebar-nav a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.menu-tab>div.menu-tab-content").removeClass("active"); $("div.menu-tab>div.menu-tab-content").eq(index).addClass("active"); }); });

 .active { background-color: yellow; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> v <!-- header --> <div class="jumbotron"> <h1>Top five facts about different martial arts</h1> </div> <!-- Top navigation --> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> </div> <ul class="nav navbar-nav"> <li><a href="#">Start</a></li> <li class="active"><a href="#">Martial arts</a></li> </ul> </div> </nav> <!-- side navigation --> <div class="row" id="row"> <div class="col-sm-3" "col-lg-2" id="menu"> <div class="sidebar-nav" "list-group"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1 class="head">Martial arts:</h1> </div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <h3 class="side">Martial arts:</h3> <ul class="nav navbar-nav" id="ul"> <a href="#" class="list-group-item text-center">MMA</a> <a href="#" class="list-group-item active text-center">Boxing</a> <a href="#" class="list-group-item text-center">Muay thai</a> <a href="#" class="list-group-item text-center">Kickboxing</a> <a href="#" class="list-group-item text-center">Takwando</a> <a href="#" class="list-group-item text-center">Karate</a> <a href="#" class="list-group-item text-center">Braziliansk jijutsu</a> <a href="#" class="list-group-item text-center">Wrestling</a> </ul> </div> </div> </div> </div> <!-- Main content --> <div class=" col-sm-9 menu-tab"> <div class="menu-tab-content "> <h1>Top 5 fact about MMA</h1> </div> <div class="menu-tab-content active"> <h1>Top 5 fact about Boxing</h1> </div> </div>

Onclick 功能以顯示菜單中的特定元素

問題描述

1 個解決方案

解決方案1
0 已采納 2017-01-05 22:12:19

Onclick 功能以顯示菜單中的特定元素

問題描述

1 個解決方案

解決方案1 0 已采納 2017-01-05 22:12:19

解決方案1
0 已采納 2017-01-05 22:12:19