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

Lesezeit: 2 Minuten

Benutzer-Avatar
Mohammed Hussain

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

  • Danke für die Hilfe. Jetzt funktioniert es. Ein weiterer Zweifel, ob die Data-Toggle-Attribute in IE8 unterstützt werden?

    – Mohamed Hussain

    7. Oktober 2013 um 13:35 Uhr

  • @MohamedHussain im twb-Quellcode verwenden sie jQuery attr Funktion zum Auslesen der data-attribute. Dies sollte von den meisten Browsern (bis IE6, glaube ich?) und definitiv IE8 unterstützt werden

    – Kippie

    7. Oktober 2013 um 13:39 Uhr

  • Danke für diese Lösung und mich davor bewahrt, verrückt zu werden.

    – Paolo Broccardo

    12. September 2017 um 19:39 Uhr

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');
})

1146340cookie-checkBootstrap Tab funktioniert nicht, wenn Tab mit data-target anstelle von href

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy