Question

我遇到只支持2个面板切换的Javascript问题。添加第3个面板时，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的新手。在此先感谢您的帮助！

Answer 1

部分内容是元素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>

使用单选按钮切换面板失败

1 个答案: