Question

我正在尝试使用以下代码使用引导标签

<div class="block full">
    <div class="block-title">
        <h2>Head</small></h2>
    </div>
    <ul class="nav nav-tabs push" data-toggle="tabs">
        <li class="active"><a href="#example-tabs-home">Home</a></li>
        <li class=""><a href="#example-tabs-profile">Profile</a></li>
        <li class=""><a href="#example-tabs-messages" data-toggle="tooltip" title="" data-original-title="Messages"><i class="icon-envelope-alt"></i></a></li>
        <li class=""><a href="#example-tabs-settings" data-toggle="tooltip" title="" data-original-title="Settings"><i class="icon-cogs"></i></a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="example-tabs-home">Home..</div>
        <div class="tab-pane" id="example-tabs-profile">Profile..</div>
        <div class="tab-pane" id="example-tabs-messages">Messages..</div>
        <div class="tab-pane" id="example-tabs-settings">Settings..</div>
    </div>
</div>

但是当我尝试使用它时。它不会切换标签但将标签内容添加到当前标签....

注意：我引用了jquery，bootstrap脚本。

Answer 1

我认为主要问题是您使用的是data-toggle="tooltip"，而您应该使用data-toggle="tab"

这很有效。

<div class="block full">
    <div class="block-title">
        <h2>Head</small></h2>
    </div>

    <ul class="nav nav-tabs push" role="tablist">
        <li class="active"><a href="#example-tabs-home" role="tab" data-toggle="tab">Home</a></li>
        <li><a href="#example-tabs-profile" role="tab" data-toggle="tab">Profile</a></li>
        <li><a href="#example-tabs-messages" role="tab" data-toggle="tab" data-original-title="Messages"><i class="glyphicon glyphicon-envelope"></i></a></li>
        <li><a href="#example-tabs-settings" role="tab" data-toggle="tab" data-original-title="Settings"><i class="glyphicon glyphicon-cog"></i></a></li>
    </ul>


    <div class="tab-content">
        <div class="tab-pane active" id="example-tabs-home">Home</div>
        <div class="tab-pane" id="example-tabs-profile">Profile</div>
        <div class="tab-pane" id="example-tabs-messages">Messages</div>
        <div class="tab-pane" id="example-tabs-settings">Settings</div>
    </div>

</div>

Bootstrap选项卡不会切换

1 个答案: