jquery .show不起作用

-2

我有一個左側導航欄在bootstrap中，當點擊一個菜單時我想用jquery.show顯示一段。看不出它爲什麼不出現：jquery .show不起作用

 <!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <meta charset="utf-8"> 
    <head> 
     <title>Nav</title> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" 
      rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 



     <style media="screen"> 
     /* make sidebar nav vertical */ 
    @media (min-width: 768px) { 
    .sidebar-nav .navbar .navbar-collapse { 
    padding: 0; 
    max-height: none; 
    } 
    .sidebar-nav .navbar ul { 
    float: none; 
    } 
    .sidebar-nav .navbar ul:not { 
    display: block; 
    } 
    .sidebar-nav .navbar li { 
    float: none; 
    display: block; 
    } 
    .sidebar-nav .navbar li a { 
    padding-top: 12px; 
    padding-bottom: 12px; 
    } 
    } 
     </style> 

     <style media="screen"> 
     .hidden { 
      display: none; 
     } 

     </style> 
    </head> 
    <body> 

    <div class="container"> 

     <div class="row"> 

     <div class="col-sm-3"> 

      <div class="sidebar-nav"> 
      <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> 
       <span class="visible-xs navbar-brand">Sidebar menu</span> 
       </div> 
       <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#section_1" id="mnuSection1" class="mnu">Section 1</a></li> 
        <li class="active"><a href="#section_2" id="mnuSection2" class="mnu">Section 2</a></li> 
        <li class="active"><a href="#section_3" id="mnuSection3" class="mnu">Section 3</a></li> 

       </ul><!--/ #nav navbar-nav --> 
       </div><!--/.nav-collapse --> 
      </div> 
      </div> 

     </div> 

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

      <h2>Test</h2> 
      <form class="form-group" action="index.html" method="post" id="sections"> 

      <div id="section_1" class="hidden"> 
       section 1 

      </div> 
      <div id="section_2" class="hidden"> 

      section 2 
     </div> 

      <div id="section_3" class="hidden"> 
       section 3 
      </div> 

      </form> 

     </div> 

     </div> 


    </div> 

    <script type="text/javascript"> 
     $('.mnu').click(function(event) { 
     var hash = $(this).attr("href") + ""; 
     $(hash).show(); 
     }); 
    </script> 

    </body> 
    </html>

來源

2017-02-24 user310291

@Santi不能明白你的意思 – user310291

打消了我的意見，我錯了。 – Santi

靠近嗎？ – user310291

點擊任何菜單元素將打開相應的部分。您可以不必使用show()。我甚至懷疑它會起作用。我建議您檢查mnu中的哪個元素被點擊，獲取它的index並刪除相應的section（具有相同index）的類別。

$('.nav').find('li').click(function() { 
 
    $('#sections').find('div').addClass('hidden'); 
 
    $('#sections').find('div').eq($(this).index()).removeClass('hidden'); 
 
});

@media (min-width: 768px) { 
 
    .sidebar-nav .navbar .navbar-collapse { 
 
    padding: 0; 
 
    max-height: none; 
 
    } 
 
    .sidebar-nav .navbar ul { 
 
    float: none; 
 
    } 
 
    .sidebar-nav .navbar ul:not { 
 
    display: block; 
 
    } 
 
    .sidebar-nav .navbar li { 
 
    float: none; 
 
    display: block; 
 
    } 
 
    .sidebar-nav .navbar li a { 
 
    padding-top: 12px; 
 
    padding-bottom: 12px; 
 
    } 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" /> 
 
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
    <div class="col-sm-3"> 
 

 
     <div class="sidebar-nav"> 
 
     <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> 
 
      <span class="visible-xs navbar-brand">Sidebar menu</span> 
 
      </div> 
 
      <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#section_1" id="mnuSection1" class="mnu">Section 1</a></li> 
 
       <li class="active"><a href="#section_2" id="mnuSection2" class="mnu">Section 2</a></li> 
 
       <li class="active"><a href="#section_3" id="mnuSection3" class="mnu">Section 3</a></li> 
 

 
      </ul> 
 
      <!--/ #nav navbar-nav --> 
 
      </div> 
 
      <!--/.nav-collapse --> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

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

 
     <h2>Test</h2> 
 
     <form class="form-group" action="index.html" method="post" id="sections"> 
 

 
     <div id="section_1" class="hidden"> 
 
      section 1 
 

 
     </div> 
 
     <div id="section_2" class="hidden"> 
 

 
      section 2 
 
     </div> 
 

 
     <div id="section_3" class="hidden"> 
 
      section 3 
 
     </div> 
 

 
     </form> 
 

 
    </div> 
 

 
    </div> 
 

 
</div>

來源

2017-02-24 22:27:18

但是......因爲[Santi的小提琴]（http://jsfiddle.net/L78pmcgs/1）顯示，OP的代碼按原樣工作。所以也許你可以[編輯]你的答案來解釋爲什麼你的代碼應該被使用。 – nnnnnn

感謝良好的代碼將使用它，但仍然想了解爲什麼我不工作，因爲我正在學習jQuery和引導 – user310291

@nnnnnn我試過它，並沒有爲我實際工作。我會試着解釋我的思維方式。 –

jquery .show不起作用

回答

相關問題