使用單選按鈕切換面板失敗

我遇到僅支持2面板切換的Javascript問題。當添加第三個面板時，Javascript無法顯示正確的面板。這可能是一個簡單的面板ID問題，但我似乎無法設置ID來切換單選按鈕。使用單選按鈕切換面板失敗

這是一個包含2片和3面板例如的jsfiddle：http://jsfiddle.net/9z8735h3/5/

下面的代碼：

<H4>2 Tab Version Work Great!</H4> 
<br /> 
<div class="container"> 
    <ul class="nav nav-tabs" id="Languages"> 
    <li class="active"><a data-target="#dotNet" data-toggle="tab">.NET</a></li> 
    <li><a data-target="#PHP" data-toggle="tab">PHP</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div class="tab-pane fade in active" id="dotNet"> 
     <!--NAV TAB CONTENT SELECTION--> 
     <form name="NetVersion"> 
     <input type="radio" id="Net40" name="thing" value="valuable" data-id="Net40" checked="checked" /> 
     <label for="Net40">4.0</label> 
     | 
     <input type="radio" id="Net56" name="thing" value="valuable" data-id="Net56" /> 
     <label for="Net56">5.6</label> 
     </form> 
     <hr /> 
     <!--NAV TAB CONTENT SELECTION--> 
     <div id="Net40View" class="col-lg-12 active"> 
     <div class="col-md-6 border-green">.NET 4.0 Left</div> 
     <div class="col-md-6 border-red">.NET 4.0 Right</div> 
     </div> 
     <div id="Net56View" class="col-lg-12 none"> 
     <div class="col-md-6 border-green active">.NET 5.6 Left</div> 
     <div class="col-md-6 border-blue">.NET 5.6 Right</div> 
     </div> 
    </div> 
    <div class="tab-pane fade in" id="PHP"> 
     <h2>Some content here</h2> 
    </div> 
    </div> 
</div> 
<br /> 
<hr /> 
<H4>But this 3 Tab Version Breakdows</H4> 
<p>I would to be able to add 3 or more radio buttons and maintain the same experience as compared to the 2 tabs above. 
</p> 
<br /> 
<div class="container"> 
    <ul class="nav nav-tabs" id="Languages"> 
    <li class="active"><a data-target="#dotNet" data-toggle="tab">.NET</a></li> 
    <li><a data-target="#PHP" data-toggle="tab">PHP</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div class="tab-pane fade in active" id="dotNet"> 
     <!--NAV TAB CONTENT SELECTION--> 
     <form name="NetVersion"> 
     <input type="radio" id="Net40" name="thing" value="valuable" data-id="Net40" checked="checked" /> 
     <label for="Net40">4.0</label> 
     | 
     <input type="radio" id="Net56" name="thing" value="valuable" data-id="Net56" /> 
     <label for="Net56">5.6</label> 
     | 
     <input type="radio" id="Net6" name="thing" value="valuable" data-id="Net6" /> 
     <label for="Net6">6.0</label> 
     </form> 
     <hr /> 
     <!--NAV TAB CONTENT SELECTION--> 
     <div id="Net40View" class="col-lg-12 active"> 
     <div class="col-md-6 border-green">.NET 4.0 Left</div> 
     <div class="col-md-6 border-red">.NET 4.0 Right</div> 
     </div> 
     <div id="Net56View" class="col-lg-12 none"> 
     <div class="col-md-6 border-green active">.NET 5.6 Left</div> 
     <div class="col-md-6 border-blue">.NET 5.6 Right</div> 
     </div> 
     <div id="Net6View" class="col-lg-12 none"> 
     <div class="col-md-6 border-green active">.NET 6.0 Left</div> 
     <div class="col-md-6 border-green">.NET 6.0 Right</div> 
     </div> 
    </div> 
    <div class="tab-pane fade in" id="PHP"> 
     <h2>Some content here</h2> 
    </div> 
    </div> 
</div>

，因爲我在Javascript一個新手我很感激這個問題的任何幫助。預先感謝任何幫助！

來源

2016-02-03 Marcelo Martins

它的一部分是元素id問題。儘管有些人會以不同的方式爭論，all element id names should be unique或HTML無效。當前的代碼包含具有相同id名稱的多個元素。第二個問題是，雖然.toggle()調用在您有兩個元素時有效，但當您有三個元素時，您將最終將兩個元素切換爲可見，當它們隱藏時，以及當前隱藏可見的元素;因此，將元素設置爲可見或隱藏時，您需要更具體。把你現在的例子調整到可以同時使用2套和3套收音機的一個：

<!doctype html> 
<html class="no-js" lang="en"> 

<head> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script> 
$(function(){ 
    $('input[name=version-two-tab]:radio').change(function(event) { 
     $('#Net40View-two-tab').toggle(); 
     $('#Net56View-two-tab').toggle(); 
    }); 
    $('input[name=version-three-tab]:radio').change(function(event) { 
     console.log(event); 
     if ($(this).data('id') === 'Net40-three-tab') { 
      $('#Net40View-three-tab').show(); 
      $('#Net56View-three-tab').hide(); 
      $('#Net6View-three-tab').hide(); 
     } 
     if ($(this).data('id') === 'Net56-three-tab') { 
      $('#Net40View-three-tab').hide(); 
      $('#Net56View-three-tab').show(); 
      $('#Net6View-three-tab').hide(); 
     } 
     if ($(this).data('id') === 'Net6-three-tab') { 
      $('#Net40View-three-tab').hide(); 
      $('#Net56View-three-tab').hide(); 
      $('#Net6View-three-tab').show(); 
     } 
    }); 
}); 
    </script> 
    <style> 
.none { 
    display: none; 
} 
.border-red { 
    border: solid 1px red; 
    border-radius: 5px; 
    padding: 5px; 
} 
.border-blue { 
    border: solid 1px blue; 
    border-radius: 5px; 
    padding: 5px; 
} 
.border-green { 
    border: solid 1px green; 
    border-radius: 5px; 
    padding: 5px; 
} 
    </style> 
    <title>Toggle Panels Failure Using Radio Buttons</title> 
</head> 
<body> 

<h4>2 Radio Version</h4> 

<ul class="nav nav-tabs" id="Languages-two-tab"> 
    <li class="active"><a data-target="#dotNet-two-tab" data-toggle="tab">.NET</a></li> 
    <li><a data-target="#PHP-two-tab" data-toggle="tab">PHP</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane fade in active" id="dotNet-two-tab"> 

     <form> 
      <input checked data-id="Net40-two-tab" id="Net40-two-tab" name="version-two-tab" type="radio"> 
      <label for="Net40-two-tab">4.0</label> | 
      <input data-id="Net56-two-tab" id="Net56-two-tab" name="version-two-tab" type="radio"> 
      <label for="Net56-two-tab">5.6</label> 
     </form> 
     <hr> 
     <div class="col-lg-12 active" id="Net40View-two-tab"> 
      <div class="col-md-6 border-green">.NET 4.0 Left</div> 
      <div class="col-md-6 border-red">.NET 4.0 Right</div> 
     </div> 
     <div class="col-lg-12 none" id="Net56View-two-tab"> 
      <div class="col-md-6 border-green">.NET 5.6 Left</div> 
      <div class="col-md-6 border-blue">.NET 5.6 Right</div> 
     </div> 

    </div> 

    <div class="tab-pane fade in" id="PHP-two-tab"> 
     <h2>Some content here</h2> 
    </div> 

</div> 
<hr> 

<h4>3 Radio Version</h4> 

<ul class="nav nav-tabs" id="Languages-three-tab"> 
    <li class="active"><a data-target="#dotNet-three-tab" data-toggle="tab">.NET</a></li> 
    <li><a data-target="#PHP-three-tab" data-toggle="tab">PHP</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane fade in active" id="dotNet-three-tab"> 

     <form> 
      <input checked data-id="Net40-three-tab" id="Net40-three-tab" name="version-three-tab" type="radio"> 
      <label for="Net40-three-tab">4.0</label> | 
      <input data-id="Net56-three-tab" id="Net56-three-tab" name="version-three-tab" type="radio"> 
      <label for="Net56-three-tab">5.6</label> | 
      <input data-id="Net6-three-tab" id="Net6-three-tab" name="version-three-tab" type="radio"> 
      <label for="Net6-three-tab">6.0</label> 
     </form> 
     <hr> 
     <div class="col-lg-12 active" id="Net40View-three-tab"> 
      <div class="col-md-6 border-green">.NET 4.0 Left</div> 
      <div class="col-md-6 border-red">.NET 4.0 Right</div> 
     </div> 
     <div id="Net56View-three-tab" class="col-lg-12 none"> 
      <div class="col-md-6 border-green">.NET 5.6 Left</div> 
      <div class="col-md-6 border-blue">.NET 5.6 Right</div> 
     </div> 
     <div id="Net6View-three-tab" class="col-lg-12 none"> 
      <div class="col-md-6 border-green">.NET 6.0 Left</div> 
      <div class="col-md-6 border-green">.NET 6.0 Right</div> 
     </div> 

    </div> 

    <div class="tab-pane fade in" id="PHP-three-tab"> 
     <h2>Some content here</h2> 
    </div> 

</div> 
<hr> 

</body> 

</html>

來源

2016-02-04 05:30:03

它像一個魅力！我感謝您的幫助。非常感謝你！ –

優秀！不用謝。很高興聽到它有幫助。 :) –

使用單選按鈕切換面板失敗

回答

相關問題