引導：顯示/隱藏內容與HTML單選按鈕

誰能幫我指出我到底在下面的Twitter的引導3段丟失：引導：顯示/隱藏內容與HTML單選按鈕

 <fieldset> 
        <input type="radio" name="rbLogin" data-toggle="tab" data-target="#login-tab" /> 
        <label for="login">Log in to my account</label> 

        <input type="radio" name="rbLogin" data-toggle="tab" data-target="#register-tab" /> 
        <label for="register">Register for a new account</label> 
     </fieldset> 

     <div class="tab-content"> 
      <div class="tab-pane" id="login-tab"> 
       Login... 
      </div> 
      <div class="tab-pane" id="register-tab"> 
       Registration 
      </div> 
     </div>

單擊任何一個單選按鈕，如預期的行爲：在顯示正確的div，另一個隱藏。到現在爲止還挺好。但單選按鈕不進入檢查狀態。我怎樣才能使這個功能完整？

客戶端明確要求不使用原始javascript或jQuery代碼來隱藏/顯示html內容。這是我的第一個Bootstrap項目，所以也許這是一個愚蠢的問題。

能夠使用元素而不是單選按鈕完成此操作，但確切的要求包含單選按鈕。

來源

2013-11-15 Zolly75

這將幫助你在具有單選按鈕正常工作：

Bootstrap radio button 「checked」 flag

來源

2013-11-15 18:17:16

謝謝，但無法根據您指定的鏈接中的信息解決問題：/如果單選按鈕標籤包含「數據切換」屬性，Bootstrap將忽略單選按鈕的默認事件。不知道爲什麼。 – Zolly75

我得到了它的這種工作方式：

<label data-toggle="tab" data-target="#tab-1"> 
    <input type="radio"> foo 
</label> 
<label data-toggle="tab" data-target="#tab-2"> 
    <input type="radio"> bar 
</label>

有的JS

$('label[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    $('input').removeAttr('checked').removeProp('checked'); 
    $(this).find('input').attr('checked','checked').prop('checked','checked'); 
});

我知道這不是免費的解決方案，但總比沒有更好:)

來源

2014-04-02 11:39:10 mihkelo

代碼的含義是什麼？ '在（'shown.bs.tab'' ... – nclsvh

引導：顯示/隱藏內容與HTML單選按鈕

回答

相關問題