Das abschalten der Tabs in der Bootstrap

Ich versuche, deaktivieren Sie die Registerkarten in der bootstrap. Ich habe geforscht und ich habe noch nicht eine Lösung gefunden.

Ich habe dies ausprobiert: Können Sie deaktivieren Sie die Registerkarten in der Bootstrap?
Es hat mich führen, um die bootstrap-Probleme... ich habe auch versucht $('.disabled').removeData('toggle');

Sah ich hier.. https://github.com/twitter/bootstrap/issues/2764
Lösung Versucht:
- Rückgabe von false

jQuery deaktivieren eine link
Lösung Versucht:
- event.defaultPrevented();

Doch habe ich nicht mit einer Antwort. So weit mein problem ist, dass die Registerkarte deaktiviert, durch Rückgabe von false. Allerdings, wenn die Registerkarte aktiv und kann angeklickt werden, es wird kein übergang zu der anderen Registerkarte, wie es sollte.

jsfiddle: http://jsfiddle.net/de8QK/

Hier ist mein code:

$(document).ready(function(){

$('#store-tab').attr('class', 'disabled');
$('#bank-tab').attr('class', 'disabled active');

$('#store-tab').not('#store-tab.disabled').click(function(event){
    $('#store-tab').attr('class', 'active');
    $('#bank-tab').attr('class', '');
    return true;
});
$('#bank-tab').not('#bank-tab.disabled').click(function(event){
    $('#bank-tab').attr('class' ,'active');
    $('#store-tab').attr('class', '');
    return true;
});

$('#store-tab').click(function(event){return false;});
$('#bank-tab').click(function(event){return false;});

$('.selectKid').click(function(event){
    $('.checkbox').removeAttr("disabled");
    $('#bank-tab').attr('class', 'active');
    $('#store-tab').attr('class', '');
});
});

Könnte, fügen Sie Ihren HTML-und/oder erstellen Sie ein jsFiddle?
überprüfen Sie den obigen Beitrag.. nur Hinzugefügt.
Wenn Sie möchten, dass Behinderte Registerkarten mit den Next/Previous-Tasten, überprüfen Sie das stackoverflow.com/a/20672122/563309

InformationsquelleAutor RyanDawkins | 2013-01-23

8

HTML: fügen Sie Einfach Klasse deaktiviert

JQUERY:
```
$(".disabled").click(function (e) {
        e.preventDefault();
        return false;
});
```
- Schöne Lösung, Danke Kumpel. Es funktioniert für mich.
InformationsquelleAutor Pastilla
7

Hier ist die Lösung. Es scheint, bootstrap nicht gefällt, ändern Sie die aktive tags manuell.
```
$(document).ready(function(){
    $('#store-tab').attr('class', 'disabled');
    $('#bank-tab').attr('class', 'disabled active');

    $('#store-tab').click(function(event){
        if ($(this).hasClass('disabled')) {
            return false;
        }
    });
    $('#bank-tab').click(function(event){
        if ($(this).hasClass('disabled')) {
            return false;
        }
    });

    $('.selectKid').click(function(event){
        $('.checkbox').removeAttr("disabled");
        $('#bank-tab').attr('class', 'active');
        $('#store-tab').attr('class', '');
    });
});
```
- Kann ich eigentlich nicht mit den geposteten Lösungen zu arbeiten für mich auf jsFiddle, aber ich bin froh, dass Sie etwas gefunden, das funktioniert für Sie.
- Das ist seltsam, dass es nicht funktionieren auf jsFiddle.. Der code, den ich benutze für mein Projekt und auf jsFiddle sind identisch mit Ausnahme der Inhalte in den tabs...
- Ha, es ist ein Schreibfehler in Ihrer bootstrap.js include - <script src="http://twitter.github.com /bootstrap/assets/js/bootstrap.js"> (beachten Sie die Leerzeichen)
- Das ist seltsam! Mein code funktioniert auf meinem Rechner aber nicht auf der Geige. Ah gut, wenigstens wurde eine Lösung gefunden!!!
- der Täter ist der Raum, in dem bootstrap.js gehören in die Geige.
- Funktioniert nicht für mich. Auch wenn ich ein console.log Funktion zu zeigen, dass die disabled Klasse erkannt wurde, es geht immer noch voran zu öffnen, den Reiter sowieso.
InformationsquelleAutor RyanDawkins
1

Versuchen Sie dies:
```
$('#store-tab').click(function(event){
    if ($(this).hasClass('disabled')) { return false; }
    $('#store-tab').attr('class', 'active');
    $('#bank-tab').attr('class', '');
    return true;
});
$('#bank-tab').click(function(event){
    if ($(this).hasClass('disabled')) { return false; }
    $('#bank-tab').attr('class' ,'active');
    $('#store-tab').attr('class', '');
    return true;
});
```
jsFiddle

Änderte ich Ihre .not() zu einer if-Anweisung, wie ich glaube, es war die Ursache Ihres events gebunden zu sein, falsch.

Ich habe auch entfernt die beiden click-Ereignisse, die nur false zurück, als Sie schien überflüssig.
- Dies macht die tabs anklickbar, aber der Inhalt ändert sich nicht. Was bedeutet, dass der data toggle ist nicht passiert, nehme ich an? Würde true zurückgeben das problem verursachen? Ich habe versucht, entfernen die return-true-Anweisung. Es hat sich auch nicht geändert, keine Wirkung.
- Ich habe das problem isoliert auf den Linien, die änderung der Attribute der Klasse und der #bank-Registerkarte und #speichern-tab. Ich verstehe nicht, wie diejenigen, die betroffen sind, das Problem jedoch. Wenn diese auskommentiert sind alles Funktionen, die normalerweise. Ich nehme an, es wurde sich mit bootstrap?
InformationsquelleAutor Sara
1

Versuchen Sie es mit dieser JavaScript statt und es sollte funktionieren! Dies ist ein wenig mehr schlank und nicht über das unnötige click Funktionen sind bereits eingebaut, um die Bootstrap-JavaScript. Es einfach deaktiviert die tabs, und reaktiviert Sie, wenn Sie auf den 'Aktivieren' button.
```
$(document).ready(function(){

    $('.nav li').attr('class', 'disabled');
    $('#bank-tab').addClass('active');

    $('.selectKid').click(function(e){
        if ( $('.disabled').length > 0 ) {
           $('.disabled').removeClass('disabled');
           return false;
        }
    });

});
```
Erklärung:, Wenn das Dokument geladen ist, fügen Sie eine Klasse disabled zu .nav li (deaktivieren der Registerkarten). Fügen Sie eine Klasse active zu den #bank-tab element (für styling Zwecke). Wenn Sie auf "Activate Tab" - Taste, wenn es irgendwelche Elemente, die übereinstimmen ul.nav li.disabled entfernen Behinderte Klasse (zu re-aktivieren der Registerkarten).

InformationsquelleAutor kyle.stearns

Keines dieser arbeitete für mich. Die Klassen wurden nur visuelle Elemente und Rückgabe von false auf klicken Sie auf die Registerkarten nicht überschreiben Sie die bereits vorhandene Funktion. Nicht zu erwähnen, es ist schwer zu biegen Sie die Registerkarte on & off basiert auf der Eingabe.

Hier ist, was ich kam mit.. zum aktivieren einer anderen Registerkarte an die Nutzer zu schicken, um es zurück.

$('#rentalstab_button').click(function(event){
    if ($(this).hasClass('disabled')) {
        $('#detailstab_button').trigger('click');
        return false;
    }
});

Die HTML-Datei auf die Registerkarte Trigger:

<li role="presentation"><a href="#basicinfotab" role="tab" data-toggle="tab">Basic Info</a></li>
<li role="presentation"><a href="#detailstab" role="tab" data-toggle="tab" id="detailstab_button">Details</a></li>
<li role="presentation"><a href="#rentalstab" role="tab" data-toggle="tab" id="rentalstab_button">Rental</a></li>

Den Javscript, mit dem sich der tab button von deaktiviert zu aktiviert etc. ist das ähnlich. In diesem code der rentaldropdown element ist ein weiteres <select> dropdown-Liste, wird bestimmt, ob der Registerkarte aktiviert oder deaktiviert werden soll. Führen Sie diese Funktion angehängt als onchange auslösen.

if(rentaldropdown.val()==1) {
    //$( "#listing_form_tab" ).tabs("enable", 3);
    console.log('enabling rental');
    $('#rentalstab_button').prop( "disabled", false ).removeClass('disabled');

} else {
    console.log('disabling rental');
    $('#rentalstab_button').prop( "disabled", true ).addClass('disabled');;

}

InformationsquelleAutor jeffkee

0

Sehr Einfache Weise
```
.nav-tabs li.active a{
    pointer-events:none;
}
```
InformationsquelleAutor Rubel Hossain

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Sehr Einfache Weise