Question

我要在以下条件下在两个选项卡之间切换：

如果我单击选项卡1，则应该打开tab1内容（如果tab2内容为打开，应该关闭或保持关闭（折叠）（如果已经关闭）选项卡2已关闭（折叠）），反之亦然
如果选项卡1已经打开，而我再次单击选项卡1，它应该保持打开状态，而选项卡2应该保持关闭（折叠）。

<div class="col-md-2">
  <div class="panel-group">
    <h4><a class="accordion-toggle number1-collapse" data-toggle="collapse" href="#collapseOne">Tab1 <small>[+]</small></a></h4>
    <div id="collapseOne" class="number1 accordion-body collapse">
      <div class="panel-body">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
    <h4><a class="accordion-toggle number2-collapse" data-toggle="collapse" href="#collapseTwo">Tab2 <small>[+]</small></a></h4>
    <div id="collapseTwo" class="number2 accordion-body collapse">
      <div class="panel-body">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
  </div>

</div>

Answer 1

根据我提供的链接，我为您创建了此链接：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Tab1 <small>[+]</small></a></li>
    <li><a data-toggle="tab" href="#tab2">Tab2 <small>[+]</small></a></li>
  </ul>

  <div class="tab-content col-md-2">
    <div id="tab1" class="tab-pane fade in active">
      <h3>Tab 1</h3>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h3>Tab 2</h3>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

一次打开1个内容

1 个答案: