La scheda Bootstrap non funziona quando scheda con destinazione dati anziché href

Question

Sto sviluppando schede di avvio con l'uso dell'attributo data-target per far corrispondere i riquadri di schede invece di utilizzare l'attributo href, poiché sto sviluppando un'app angolare (href potrebbe rovinare il mio percorso).

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

Si prega di vedere questo violino http://jsfiddle.net/xFW8t/4/. Dove ho ricreato il tutto.

Non voglio lo stile di bootstrap da applicare per le mie schede, voglio solo la funzionalità, voglio che i miei stili vengano applicati, è comunque necessario interrompere lo stile di bootstrap da applicare? Si prega di aiutare in questo grazie in anticipo per qualsiasi aiuto.

Answer 1

Aggiungi data-toggle="tab" attributo nel markup

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

Js Fiddle Demo

Answer 2

provare in questo modo:

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

Answer 3

Come menzionato da @Sachin, è necessario specificare l'attributo data-toggle. Oltre a ciò, assicurati di compilare correttamente i tuoi data-target s. Questi prendono selettori di jQuery, ids non elemento, se utilizzato con `data-target (link)

Answer 4

Se si utilizza data-toggle="tab" -. È possibile rimuovere la vostra inizializzazione js -

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

Bootstrap sarà init automaticamente schede.

Se si desidera inizializzare le schede maually - è possibile rimuovere data-toggle="tab" dal layout e Itin tutte le schede separatamente:

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