Bootstrap：如何使用导航栏？

Question

我是bootstrap新手，有一个关于它的问题。

如果我有一个下拉菜单导航栏的代码，就像这样

<div class="navbar-collapse collapse">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#menu1">menu 1</a></li>
            <li><a href="#menu2">menu 2</a></li>
            <li><a href="#menu3">menu 3</a></li>
        </ul>
</div>

如果我点击菜单中的一个链接，链接会变成这样 "www. ...../#menu1"。

问题是如果我想让刚刚点击的菜单的内容出现，我该怎么做？

<div class="container">
    <!-- my rough idea is like this-->
    <div id="#menu1"> content from menu 1</div>
    <div id="#menu2"> Content from menu 2</div>
    <div id="#menu3"> Content from menu 2</div>
</div>

我尝试了很多次，但它仍然显示了两个数据。我已经像这样从 JavaScript（来自 Bootstrap）中包含了：

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>

- someone

Answer 1

您需要使用jQuery来显示/隐藏内容。请尝试以下代码：

1. Add a class="content" to your divs and remove the # from ID

   <div id="menu1" class="content"> content from menu 1</div>

2. Add a jQuery event to you nav links

   $(".dropdown-menu a").on('click',function(e) {
      e.preventDefault(); // stops link from loading
      $('.content').hide(); // hides all content divs
      $('#' + $(this).attr('href') ).show(); //get the href and use it find which div to show
   });
   

希望这能帮到你。//编辑

- wutang