引导选项卡式窗格不起作用

Question

I'm making a modal tabbed pane in bootstrap according to guide . Here is fiddle and code:

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

This doesn't works (content of tabs isn't shown). What is my mistake? Do I activate tabs wrong or what?

Answer 1

You didn't include the hash in the href for the tabs, 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>

Answer 2

You simply need to add a # in the href, so that it knows its looking for a ID of an element.

<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/

Answer 3

try this

 <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> 

Answer 4

You've forget the "#" on the href. See <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>