Verwenden von Optionsfeldern zur Registerkartensteuerung mit Bootstrap

Ich versuche, Registerkarten mit Optionsfeldern zu steuern, um einen Inhaltsbereich für einen Planungsbildschirm zu ändern. Dies funktioniert anders als die Radio-Buttons nicht überprüfen.Verwenden von Optionsfeldern zur Registerkartensteuerung mit Bootstrap

Wer hat irgendwelche Ideen, wie das zu beheben? Hier

<div> 
    <div> 
     <input id="optDaily" name="intervaltype" checked type="radio" data-target="#scheduleDaily" data-toggle="tab"> 
     <label for="optDaily">Daily</label> 
    </div> 
    <div> 
     <input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly" data-toggle="tab"> 
     <label for="optWeekly">Weekly</label> 
    </div> 
    <div> 
     <input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly" data-toggle="tab"> 
     <label for="optMonthly">Monthly</label> 
    </div> 
</div> 

<div class="tab-content"> 
    <div id="scheduleDaily" class="tab-pane active schedule-pane" > 
     Daily 
    </div> 

    <div id="scheduleWeekly" class="tab-pane schedule-pane" > 
     Weekly 
    </div> 

    <div id="scheduleMonthly" class="tab-pane schedule-pane" > 
     Montly 
    </div> 
</div>

ist das Beispiel in jsfiddle http://jsfiddle.net/nEWMq/

Quelle

2013-02-20 Dreamwalker

Die Radio-Buttons sind nicht wegen this code geprüft zu werden:

e.preventDefault()

Um dies zu beheben, entfernen Sie data-toggle="tab" aus den Radio-Buttons und fügen Sie dann Dieser jQuery-Code:

$('input[name="intervaltype"]').click(function() { 
    $(this).tab('show'); 
});

Quelle

2013-02-21 04:28:16

ja ich mich gefragt, ob ich mich selbst über den Umgang mit ihm gehen sollte, dachte aber, was hier Leute kam. Aber ich kann keinen anderen Weg sehen. Danke für die Antwort – Dreamwalker

Arbeitsbeispiel mit Bootstrap 3 (funktioniert aber auch mit Bootstrap 2.3): http://jsfiddle.net/NEWMq/88/ – Sphinxxx

@Sphinxxx danke .. Ihr Beispiel hat mir heute geholfen. Bin dankbar. –

Versuchen das funktioniert für mich

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="span12"> 
 
\t \t \t <p class="lead">Bare minimum radio button tabs example:</p> 
 

 
\t \t \t <div id="tab" class="btn-group" data-toggle="buttons"> 
 
\t \t \t \t <a href="#prices" class="btn btn-default active" data-toggle="tab"> 
 
        <input type="radio" />Prices</a> 
 
\t \t \t \t <a href="#features" class="btn btn-default" data-toggle="tab"> 
 
        <input type="radio" />Features</a> 
 
\t \t \t \t <a href="#requests" class="btn btn-default" data-toggle="tab"> 
 
        <input type="radio" />Requests</a> 
 
\t \t \t \t <a href="#contact" class="btn btn-default" data-toggle="tab"> 
 
        <input type="radio" />Contact</a> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="tab-content"> 
 
\t \t \t \t <div class="tab-pane active" id="prices">Prices content</div> 
 
\t \t \t \t <div class="tab-pane" id="features">Features Content</div> 
 
\t \t \t \t <div class="tab-pane" id="requests">Requests Content</div> 
 
\t \t \t \t <div class="tab-pane" id="contact">Contact Content</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Quelle

2016-06-21 19:23:35 Monzur

Verwenden von Optionsfeldern zur Registerkartensteuerung mit Bootstrap

Antwort

Verwandte Themen