javascript - 我被困在 javascript 中，隐藏/激活选定的选项卡

Question

我有 2 个 div 行，每个行都有 4 个选项卡。如果我在其中一个 div 中打开一个选项卡，我希望关闭其他 div 选项卡。我该怎么做？

这是我的代码(也可以在 codepen 上看到它):

$(function () {
  $('.nav nav-tabs responsive li').click(function (e) {
    e.preventDefault();
    if (!$(this).hasClass("selected")) {
      $('.tabs-nav a').removeClass("selected");
      $('.content').hide();
      $('.content-' + $(this).attr("class")).show();
      $(this).addClass("selected");
    }
  });
});

.hidden{display:none;}
.selected{font-weight:bold;}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://openam.github.io/bootstrap-responsive-tabs/js/responsive-tabs.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">

  <div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs responsive" role="tablist">
      <li role="presentation" class=""><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#tab2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#tab3" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#tab4" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content responsive">
      <div role="tabpanel" class="tab-pane " id="tab1">First Tab Content Goes Here</div>
      <div role="tabpanel" class="tab-pane" id="tab2">Second Tab Content Goes Here</div>
      <div role="tabpanel" class="tab-pane" id="tab3">Third Tab Content Goes Here</div>
      <div role="tabpanel" class="tab-pane" id="tab4">Fourth Tab Content Goes Here</div>
    </div>

  </div>

  <div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs responsive" role="tablist">
      <li role="presentation" class=""><a href="#tab11" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#tab12" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#tab13" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#tab14" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content responsive">
      <div role="tabpanel" class="tab-pane " id="tab11">First Tab Content Goes Here</div>
      <div role="tabpanel" class="tab-pane" id="tab12">Second Tab Content Goes Here</div>
      <div role="tabpanel" class="tab-pane" id="tab13">Third Tab Content Goes Here</div>
      <div role="tabpanel" class="tab-pane" id="tab14">Fourth Tab Content Goes Here</div>
    </div>

  </div>


</div>
<!-- /container -->

Answer 1

  <script type="text/javascript">
    $(document).ready(function() {
      $('.nav-tabs li a').click(function(){      //Click on a navigation item
        $('.nav-tabs li').removeClass('active'); //Remove Active style of item
        $('.tab-pane').removeClass('active');    //Hide the tab content
      });
    });
  </script>

尝试一下，它的工作。