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

【问题标题】：I'm stuck in javascript, hide / activate selected tab我被困在 javascript 中，隐藏/激活选定的选项卡
【发布时间】：2015-10-24 01:39:00
【问题描述】：

我有 2 行 div 行，每行都有 4 个选项卡。如果我在divs 之一中打开一个选项卡，我希望关闭其他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 -->

【问题讨论】：

链接中的代码在被点击时似乎打开了一个标签，并且旧的标签文本消失了。这与您要完成的工作有何不同？
i 如果您单击第二行，您将看到第一行的文本选项卡不会消失。
您的意思是要合并选项卡吗？那么我建议你简单地将它们组合起来，然后用 css 修复其余部分。
我认为 Smil Miau 想要的是将标签保持在两行中，但一次只打开一个（与它在哪一行无关）

标签： javascript jquery html css tabs

【解决方案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>

试试看，效果不错。

【讨论】：