Sử dụng các nút radio để điều khiển tab bằng cách sử dụng bootstrap

Question

Tôi đang cố gắng kiểm soát các tab bằng nút radio để thay đổi vùng nội dung cho màn hình lập lịch biểu. Điều này hoạt động tốt hơn các nút radio không kiểm tra.

Bất kỳ ai có ý tưởng nào về cách sửa lỗi này?

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

Dưới đây là ví dụ trong jsfiddle http://jsfiddle.net/nEWMq/

Answer 1

Các nút radio không bị kiểm tra vì this code:

e.preventDefault() 

Để sửa lỗi này, loại bỏ data-toggle="tab" từ các nút radio và sau đó thêm mã jQuery này:

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

Answer 2

Hãy thử làm việc này cho tôi

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