Fatal编程技术网
  • javascript/
  • Javascript 使用单选按钮切换面板故障

Javascript 使用单选按钮切换面板故障

javascript html

Javascript 使用单选按钮切换面板故障,javascript,html,radio-button,toggle,Javascript,Html,Radio Button,Toggle,我对只支持两个面板切换的Javascript有问题。添加第三个面板时，Javascript无法显示正确的面板。这可能是一个简单的面板ID问题，但我似乎无法设置单选按钮切换的ID 下面是包含2个面板和3个面板的JSFIDLE示例： 代码如下： <H4>2 Tab Version Work Great!</H4> <br /> <div class="container"> <ul class="nav nav-tabs" id="Langu

我对只支持两个面板切换的Javascript有问题。添加第三个面板时，Javascript无法显示正确的面板。这可能是一个简单的面板ID问题，但我似乎无法设置单选按钮切换的ID

下面是包含2个面板和3个面板的JSFIDLE示例：

代码如下：

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

2选项卡版本工作得很好！



    

  • .NET
    • 

  • PHP
    • 


4
|
5.6


.NET 4.0左
.NET4.0对吗
.NET 5.6左
.NET 5.6对
这里有一些内容




但是这3个标签的版本已经过时了
我希望能够添加3个或更多单选按钮，并保持与上述2个选项卡相同的体验。





    

  • .NET
    • 

  • PHP
    • 


4
|
5.6
|
6


.NET 4.0左
.NET4.0对吗
.NET 5.6左
.NET 5.6对
.NET 6.0左
.NET6.0对
这里有一些内容
我非常感谢您对这个问题的帮助，因为我是Javascript的新手。提前感谢您的帮助

其中一部分是元素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>


$（函数（）{
$（'input[name=version two tab]：radio'）。更改（函数（事件）{
$（'#net40查看两个选项卡'）。切换（）；
$（“#net56查看两个选项卡”）.toggle（）；
});
$（'input[name=version three tab]：radio'）。更改（函数（事件）{
console.log（事件）；
if（$（this）.data（'id'）=='Net40三个选项卡'）{
$（“#net40查看三个选项卡”）.show（）；
$（“#net56查看三个选项卡”）.hide（）；
$（“#Net6View三个选项卡”）.hide（）；
}
if（$（this）.data（'id'）=='Net56三个选项卡'）{
$（“#net40查看三个选项卡”）.hide（）；
$（“#net56查看三个选项卡”）.show（）；
$（“#Net6View三个选项卡”）.hide（）；
}
if（$（this）.data（'id'）=='Net6三个选项卡'）{
$（“#net40查看三个选项卡”）.hide（）；
$（“#net56查看三个选项卡”）.hide（）；
$（“#Net6View三个选项卡”）.show（）；
}
});
});
.没有{
显示：无；
}
.红色边框{
边框：实心1px红色；
边界半径：5px；
填充物：5px；
}
.蓝色边框{
边框：纯色1px蓝色；
边界半径：5px；
填充物：5px；
}
.边界绿{
边框：实心1px绿色；
边界半径：5px；
填充物：5px；
}
使用单选按钮切换面板故障
2广播版

    

  • .NET
    • 

  • PHP
    • 


4.0 |
5.6


.NET 4.0左
.NET4.0对吗
.NET 5.6左
.NET 5.6对
这里有一些内容


3广播版

    

  • .NET
    • 

  • PHP
    • 


4.0 |
5.6 |
6


.NET 4.0左
.NET4.0对吗
.NET 5.6左
.NET 5.6对
.NET 6.0左
.NET6.0对
这里有一些内容
它就像一个符咒！我感谢你的帮助。非常感谢！杰出的不客气。很高兴听到这有帮助。：）