Twitter bootstrap 引导导航选项卡中的单选按钮面板切换未显示正确的内容选择

有趣的问题让我抓狂。我试图让单选按钮标记为“银行”，以显示默认情况下隐藏的面板。 图为：

以下是JSFIDLE：

银行|
学校

左岸名单






右岸名单






左校名单






正确的学校名单






默认2内容

我尝试从

中删除CSS class=“none”以使面板在pageload上可用，但这只会导致其他单选按钮出现更多问题

我正在寻找的经验是选项卡默认值1，显示由“银行”单选按钮选择的面板内容，带有在银行和学校之间切换的选项

---

如果有人能帮忙，我将不胜感激。谢谢

将表单名称更改为表单id，并使用下面的js

var$radiold=$（'input[name=thing]：checked'）；
$（'#NetVersion input'）。在（'change'，function（）上{
var$radio=$（'input[name=thing]：checked'）；
var id=$radio.attr（'id'）；
var idold=$radioold.attr（'id'）；
$radioold=$radio；
$（“#”+id+“视图”）.show（）；
$（'#'+idold+'View'）.hide（）；
});


这是一个非常有效的
，但我忽略了一个事实，即在同一个JSFIDLE中，tab DEFAULT 2也可能包含相同的功能，这意味着将有其他选项可供选择。我添加了一个新的JSFIDLE来举例说明这个问题：
<div class="container">
  <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
        <li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1default">
          <!--NAV TAB CONTENT SELECTION-->
          <form name="ServiceSelection">
          <input type="radio" id="bankview" name="thing" value="valuable" data-id="bank" checked="checked" />
          <label for="bankview">Banks</label> |
          <input type="radio" id="schoolview" name="thing" value="valuable" data-id="school" />
          <label for="schoolview">Schools</label>
          </form>
          <!--NAV TAB CONTENT SELECTION-->
          <hr />
          <div id="bank" class="none">
            <!--BANK LISTINGS-->
            <div class="col-lg-12 clearfix">
              <div class="col-md-6 col-sm-6 border-red">
                Left Bank List
                <br />
                <br />
                <br />
              </div>
              <div class="col-md-6 col-sm-6 border-blue">
                Right Bank List
                <br />
                <br />
                <br />
              </div>
            </div>
          </div>
          <div id="school" class="none">
            <!--SCHOOL LISTINGS-->
            <div class="col-lg-12 clearfix">
              <div class="col-md-6 col-sm-6 border-red">
                Left School List
                <br />
                <br />
                <br />
              </div>
              <div class="col-md-6 col-sm-6 border-blue">
                Right School List
                <br />
                <br />
                <br />
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="tab2default">Default 2 Content</div>
      </div>
    </div>
  </div>
</div>