Zakładka Bootstrap nie działa, gdy zakładka z celem danych zamiast href

Question

Zajmuję się tworzeniem zakładek ładowania przy użyciu atrybutu data-target, aby dopasować tafle zakładek zamiast używania atrybutu href, ponieważ opracowuję aplikację kątową (href może zepsuć moja trasa).

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a data-target="home">Home</a></li> 
    <li><a data-target="profile">Profile</a></li> 
    <li><a data-target="messages">Messages</a></li> 
    <li><a data-target="settings">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

<script> 
    jQuery(function() { 
     jQuery('#myTab a:last').tab('show') 
    }) 
</script> 

Proszę zobaczyć ten skrzypek http://jsfiddle.net/xFW8t/4/. Gdzie odtworzyłem całość.

Nie chcę, aby styl ładowania był stosowany dla moich kart, chcę tylko funkcjonalność, chcę, aby moje style zostały zastosowane, czy mimo to należy zatrzymać styl ładowania początkowego? Prosimy o pomoc z góry dzięki za pomoc.

Answer 1

Dodaj data-toggle="tab" atrybut w znacznikach

<a data-target="#home" data-toggle="tab">Home</a> 

Js Fiddle Demo

Answer 2

spróbuj tak:

jQuery(function() { 
    jQuery('#myTab a').on('click', function() { 
     $(this).tab('show'); 
    }); 
}) 

Answer 3

Jak wspomniano przez @Sachin, trzeba określić atrybut data-toggle. Poza tym upewnij się, że prawidłowo wypełniłeś swoje data-target s. Przyjmują one selektorów jQuery IDS nie elementów, gdy używana z `data-target (link)

Answer 4

Jeśli używasz data-toggle="tab". - można usunąć inicjalizacji js -

<script> 
    jQuery(function() { 
     jQuery('#myTab a:last').tab('show') 
    }) 
</script> 

Bootstrap automatycznie init, zaczepy.

Jeśli chcesz init kartami maually - można usunąć data-toggle="tab" z układu i NIP wszystkie karty oddzielnie:

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
})