Bootstrap选项卡式窗格不起作用

我正在根据guide在Bootstrap中制作模式选项卡式窗格。这里是fiddle和代码：Bootstrap选项卡式窗格不起作用

$(document).on("click","#tabs a",function(event) 
{ 
    alert("!!!"); 
    event.preventDefault(); 
    $(this).tab('show'); 
})

这不作品（选项卡的内容未显示）。我的错误是什么？我是否错误地激活了标签或什么？

来源

2014-09-23 Sergey Scopin

请将HTML复制到您的StackOverflow问题中，请不要链接到JS Fiddle。 – cvrebert 2014-09-23 18:10:37

您没有在标签的href中包含散列，updated fiddle。

<ul class='nav nav-tabs' role='tablist' id='tabs'> 
    <li class='active'><a href='#forPhys' role='tab' data-toggle='tab'>For individuals</a></li> 
    <li><a href='#forOrg' role='tab' data-toggle='tab'>For organisations</a></li> 
</ul>

来源

2014-09-23 11:21:47 devools

你的回答是第一位的。 – 2014-09-23 11:31:22

你只需要在href中添加一个＃，以便它知道它正在寻找一个元素的ID。

<ul class='nav nav-tabs' role='tablist' id='tabs'> 
    <li class='active'><a href='#forPhys' role='tab' data-toggle='tab'>For individuals</a></li> 
    <li><a href='#forOrg' role='tab' data-toggle='tab'>For organisations</a></li> 
</ul>

http://jsfiddle.net/52VtD/8212/

来源

2014-09-23 11:23:39 Josh90

试试这个

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <ul class='nav nav-tabs' role='tablist' id='tabs'> 
 
     <li class='active'><a href='#forPhys' role='tab' data-toggle='tab'>For individuals</a></li> 
 
     <li><a href='#forOrg' role='tab' data-toggle='tab'>For organisations</a></li> 
 
    </ul>

来源

2014-09-23 11:28:14

你已经忘记的href的 “＃”。请参阅 <ul class='nav nav-tabs' role='tablist' id='tabs'> <li class='active'> <a href='#forPhys' role='tab' data-toggle="tab">For individuals</a> </li> <li> <a href='#forOrg' role='tab' data-toggle="tab"> For organisations</a> </li> </ul>

来源

2014-09-23 11:34:42

Bootstrap选项卡式窗格不起作用

回答

相关问题