ブートストラップを使用してタブコントロールにラジオボタンを使用する

Question

ラジオボタンでタブを制御して、スケジューリング画面のコンテンツ領域を変更しようとしています。これは、ラジオボタンがチェックしない以外は正常に動作します。

誰でもこの問題を解決する方法がありますか？

e.preventDefault() 

、この問題を解決するラジオボタンからdata-toggle="tab"を削除してから追加するには：ここで

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

はjsfiddle http://jsfiddle.net/nEWMq/

Answer 1

にラジオボタンがあるためthis codeのチェックを取得されていない例です。このjQueryコード：

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

Answer 2

これは私がそれを私の自己の取り扱いについては行くが、人々がここに思い付いた考えなければならないなら、私

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