Панель вкладок Bootstrap не работает

Question

Я делаю modal tabbed панель в bootstrap в соответствии с guide. Вот fiddle и код:

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

Это не работает (содержание вкладок не показан). Какая у меня ошибка? Я активирую вкладки неправильно или что?

Answer 1

Вы не включили хэш в 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> 

Answer 2

Вам просто нужно добавить # в 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> 

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

Answer 3

попробовать это

<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

Вы имеете забыть "#" на 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>