2014-10-05 130 views
0

我将尝试使用下面的代码引导标签不切换

<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,引用脚本引导。

回答

0

我认为主要的问题是你使用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> 
+0

同样的问题occures ...我有剧烈的头痛试图找出问心无愧是这个.... – 2014-10-05 13:51:40

+0

以及当我重新下载的引导文件..也许这是一个已损坏的JS和CSS引导它是固定.. – 2014-10-05 16:02:14

+0

我用你的代码与最新版本的bootstrap通过CDN,它没有工作,所以我怀疑它是损坏的bootstrap或js ... – timgavin 2014-10-05 16:36:06