Bootstrap Tab funktioniert nicht, wenn Tab mit data-target anstelle von href

Ich entwickle Bootstrap-Tabs mit der Verwendung von data-target -Attribut, um es mit den Registerkarten abzugleichen, anstatt das zu verwenden href Attribut, da ich eine eckige App entwickle (href könnte meine Route verderben).

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

Bitte sehen Sie sich diese Geige an http://jsfiddle.net/xFW8t/4/. Wo ich das ganze nachgebaut habe.

Ich möchte nicht, dass der Bootstrap-Stil auf meine Registerkarten angewendet wird, ich möchte nur die Funktionalität, ich möchte, dass meine Stile angewendet werden. Soll der Bootstrap-Stil trotzdem angewendet werden? Bitte helfen Sie in diesem Dank im Voraus für jede Hilfe.

Hinzufügen data-toggle="tab" -Attribut in Ihrem Markup

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

Js Fiddle-Demo

versuche es mal so:

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

Wie von @Sachin erwähnt, müssen Sie die angeben data-toggle Attribut. Stellen Sie ansonsten sicher, dass Sie Ihre korrekt ausfüllen data-targets. Diese nehmen jQuery-Selektoren, nicht Element-IDs, wenn sie mit verwendet werden `data-target.(Verknüpfung)

Wenn Sie verwenden data-toggle="tab" – Sie können Ihre js-Initialisierung entfernen –

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

Bootstrap initialisiert Tabs automatisch.

Wenn Sie Ihre Registerkarten manuell initialisieren möchten, können Sie sie entfernen data-toggle="tab" aus dem Layout und in allen Registerkarten separat:

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