Question

我在bootstrap中有一个左侧导航栏，当点击菜单时我想用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>

Answer 1

点击任何菜单元素将打开相应的部分。

您不必使用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>

jquery .show不起作用

1 个答案: