Utilizzo di pulsanti di opzione per il controllo struttura a schede tramite bootstrap

Sto provando a controllare le schede con i pulsanti di opzione per modificare un'area di contenuto per una schermata di pianificazione. Funziona benissimo tranne che i pulsanti di opzione non controllano.Utilizzo di pulsanti di opzione per il controllo struttura a schede tramite bootstrap

Qualcuno ha qualche idea su come risolvere questo problema?

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

Ecco l'esempio nella jsfiddle http://jsfiddle.net/nEWMq/

fonte

2013-02-20 Dreamwalker

I pulsanti di opzione non sono sempre controllati a causa della this code:

e.preventDefault()

Per risolvere questo problema, rimuovere data-toggle="tab" dai pulsanti di opzione e quindi aggiungere questo codice jQuery:

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

fonte

2013-02-21 04:28:16

sì Cosa mi chiedevo se devo fare per gestire la mia auto, ma il pensiero quello che la gente si avvicinò con qui. Ma non posso vedere in nessun altro modo. Grazie per la risposta – Dreamwalker

Esempio di lavoro, utilizzando Bootstrap 3 (ma funziona anche con Bootstrap 2.3): http://jsfiddle.net/nEWMq/88/ – Sphinxxx

@Sphinxxx grazie .. il tuo esempio mi ha aiutato oggi. Apprezzalo. –

Prova questo funziona per me

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

fonte

2016-06-21 19:23:35 Monzur

Utilizzo di pulsanti di opzione per il controllo struttura a schede tramite bootstrap

risposta

Problemi correlati