使用单选按钮切换面板失败
Toggle Panels Failure Using Radio Buttons
我在使用仅支持 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的新手。 提前感谢任何帮助！
其中一部分是元素 ID 问题。尽管有些人会有不同的论点，但所有元素 ID 名称都应该是唯一的，否则 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>
相关文章：
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时，jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 客户端单选按钮列表验证
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 单击时如何更改单选按钮的CSS
- 使用按钮和单选按钮提交表单，但始终使用相同的值
- 注入Javascript以选择具有指定值的所有单选按钮
- 复选框/单选按钮-添加所选项目的总价
- 单选按钮检查属性在函数 - JavaScript 中失败
- 使用单选按钮切换面板失败
- Angularjs:当模型改变时，单选按钮检查状态绑定模型值失败
