Bootstrap：如何使用导航栏？答案

【问题标题】：Bootstrap: how to use navbar?Bootstrap：如何使用导航栏？
【发布时间】：2013-10-25 00:27:30
【问题描述】：

我是 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（来自引导程序）中包含了

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

【问题讨论】：

标签： javascript jquery html twitter-bootstrap navbar

【解决方案1】：

您需要使用 jQuery 来显示隐藏内容。试试这个：

在您的 div 中添加 class="content" 并从 ID 中删除 #

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

为你的导航链接添加一个 jQuery 事件

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

希望有所帮助 //编辑

【讨论】：