0
我遇到僅支持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一個新手我很感激這個問題的任何幫助。預先感謝任何幫助!
它像一個魅力!我感謝您的幫助。非常感謝你! –
優秀!不用謝。很高興聽到它有幫助。 :) –