Question

我尝试使用bootstrap构建示例。我的问题是nav-tabs，我想在其中使用工作下拉菜单并在其间切换。这是我的nav-tabs，其名称为：|城市1 |城市2 |城市3 /每个城市都有自己的内容。让我们说City 2有一个下拉菜单。按下它时显示两个地址供选择。如果您选择任何地址，则会显示其内容这是我的HTML：

<ul class="nav nav-tabs nav-justified" id="myTab">
    <li class="active"><a href="#City1" data-toggle="tab">City1</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#City2">City2 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#Address1">Address1</a></li>
            <li><a href="#Address2">Address2</a></li>
        </ul>
    </li>
    <li><a href="#City3" data-toggle="tab">City3</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="City1">
        <h4><i class="glyphicon glyphicon-user"></i></h4>Lorem profile dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        <p>Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.</p>
              </div>
    <div class="tab-pane" id="Address1">
        <h4><i class="glyphicon glyphicon-user"></i></h4>Lorem profile dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        <p>Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.</p>
    </div>
    <div class="tab-pane" id="Address2">
        <h4><i class="glyphicon glyphicon-user"></i></h4>Lorem profile dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                <p>Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.</p>
    </div>
    <div class="tab-pane" id="City3">
        <h4><i class="glyphicon glyphicon-cog"></i></h4>Lorem settings dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        <p>Quisque mauris augue, molestie.</p>
</div>

提前谢谢！

Answer 1

您在下拉列表中的链接上缺少data-toggle属性。

http://jsfiddle.net/isherwood/224eT

<li><a href="#Address1" data-toggle="tab">Address1</a></li>
<li><a href="#Address2" data-toggle="tab">Address2</a></li>

nav-tabs with bootstrap中的下拉菜单

1 个答案: