Javascript 引导4中的选项卡折叠

在我的代码中，我有bootstrap 4选项卡。我想首先，当我单击Tab li时，所有选项卡内容都将隐藏，然后将显示选项卡内容。 为此，我已从tab pane div中删除了活动类，因此现在，首先内容不显示，当我单击tab li时，它会显示，但再次单击该li后，它不会关闭

我希望当我再次单击tab li按钮时，选项卡内容应再次关闭

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>

A.
B
C
D

只是想当点击菜单时，它会显示内容，当再次点击菜单时，它应该关闭

帮帮我现在它可以工作了 使用以下引导CDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

A.
B
C
D

已更新

在再次单击时添加此额外代码以删除活动类

$(document).on('click','.nav-link.active', function(){
  var href = $(this).attr('href').substring(1);
  $(this).removeClass('active');
  $('.tab-pane[id="'+ href +'"]').removeClass('active');
})

$（document）.on（'click'，'nav link.active'，function（）{
var href=$（this.attr（'href'）.substring（1）；
//警报（href）；
$（this.removeClass（'active'）；
$（'.tab窗格[id=“”+href+'“]'）。removeClass（'active'）；
})

A.
B
C
D

将以下引导CDN添加到代码中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

使用的是什么版本？Beta或Alpha我正在使用bootstrap4 Alpha在第二次单击时应该发生什么？你说的

它不关闭是什么意思？

我希望所有内容都隐藏起来，当我单击li选项卡时，它应该打开内容。当我再次单击li时，它应该关闭选项卡内容。第1、第2、第3、第2、第3、第3页也是如此，第四个菜单项..您向我粘贴了我要求更改的相同代码..但它也不是working@Tanmay请检查您的

CDN

我希望所有内容都被隐藏，当我单击li选项卡时，它将打开内容。当我再次单击li时，它将关闭选项卡内容。第1、第2、第3、第2、第3、第2、第3页也是如此，第四个菜单项。非常感谢我一直在寻找答案。很乐意帮忙：）还有一个问题。当您单击菜单按钮超过2次时，它不起作用。它应该是$（'.tab pane[id=“'+href+'”）。toggleClass（'active'）；请参阅更新的答案。添加此行

$（this）.removeClass（'active'）