Question

我正在尝试设计一个如下所示的网页：

-------------------------
| top banner             |
-------------------------
| nav-pill menu          |
-------------------------
| content area           |
|                        |
-------------------------

导航我正在使用Bootstrap Pills。我想使用nav-pill菜单按钮来更改两个顶部横幅和内容区域。

我的代码到目前为止： 热门标语：

<div class="tab-content">  
<div id="menu1a" class="tab-pane fade in">
     <span>Test 1</span>
</div>
<div id="menu2a" class="tab-pane fade in">
    <span>Test 2</span>
</div>
</div>

药丸：

<ul class="nav nav-pills" style="display: inline-block;">
<li class="active">
    <a data-toggle="pill" role="button" href="#menu1">Menu 1</a>
</li>
<li>
    <a data-toggle="pill" role="button" href="#menu2">Menu 2</a>
</li>
<ul>

内容区

<div class="tab-content">  
<div id="menu1" class="tab-pane fade in">
     <span>Test 1</span>
</div>
<div id="menu2" class="tab-pane fade in">
    <span>Test 2</span>
</div>
</div>

基本上我的问题是：是否可以从菜单中的<a data-toggle="pill" role="button" href="#menu1">导航按钮调用两个单独的ID？

我尝试过使用onclick="href='#menu1'; href='#menu1a'"以及JQuery

 $(".active").removeClass("active");
    $("#menu1a").addClass("active");
    $("#menu1").addClass("active");

Answer 1

您可以使用href而不是data-target，而<div class="tab-content"> <div id="menu1a" class="tab-pane fade in menu1tab active"> <span>Test 1</span> </div> <div id="menu2a" class="tab-pane fade in menu2tab"> <span>Test 2</span> </div> </div> <ul class="nav nav-pills" style="display: inline-block;"> <li class="active"> <a data-toggle="pill" role="button" data-target=".menu1tab">Menu 1</a> </li> <li> <a data-toggle="pill" role="button" data-target=".menu2tab">Menu 2</a> </li> </ul> <div class="tab-content"> <div id="menu1" class="tab-pane fade in menu1tab active"> <span>Test 1</span> </div> <div id="menu2" class="tab-pane fade in menu2tab"> <span>Test 2</span> </div> </div>可以定位您想要与锚点切换的所有元素共享的公共类。还要将活动类添加到默认情况下要显示的选项卡窗格中。

<强> Bootply
http://www.bootply.com/2LgV53lYVi

<强>标记

Router

Bootstrap Nav Pill更新两个不同的Div

1 个答案: