Bootstrap中的Tab折叠4

在我的代码中，我有bootstrap 4 Tab。我希望所有选项卡内容都会隐藏，当我点击标签li然后标签内容将会显示。因为我已经从tab-pane div中删除活动类，所以现在在第一个内容不显示，当我点击选项卡李它显示然后，但是当我再次单击该li后它不关闭。Bootstrap中的Tab折叠4

我想再次点击标签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>

只想当单击菜单将显示内容，然后再次单击菜单时，应该关闭。

帮助我

来源

2017-10-10 Tanmay

是什么版本？测试版或Alpha – core114

我正在使用bootstrap4 alpha – Tanmay

第二次点击会发生什么？ “它不关闭”是什么意思？ –

更新

添加此额外的代码以再次单击时删除活动类。对于使用

$(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); 
 
    //alert(href); 
 
    $(this).removeClass('active'); 
 
    $('.tab-pane[id="'+ href +'"]').removeClass('active'); 
 
})

<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> 
 

 

 

 

 

 

 
<!-- 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>

来源

2017-10-10 09:25:59 Bhuwan

非常感谢你，我一直在寻找答案 – Tanmay

乐意帮忙:) – Bhuwan

还有一个问题。当您单击菜单按钮超过2次时，它不起作用 – Tanmay

现在，它的工作使用以下引导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>

<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> 
 

 

 

 

 

 

 
<!-- 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>

来源

2017-10-10 09:14:37 core114

You粘贴相同的代码给我，我要求改变..并且它也不起作用 – Tanmay

@坦美请检查您的CDN' – core114

我希望所有被隐藏，当我点击李选项卡它应该打开内容。当我再次点击li时，它应该关闭标签内容。同样，第一，第二，第三，第四个菜单项也是如此。 – Tanmay

添加以下引导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>

来源

2017-10-10 09:31:14 Mitesh

Bootstrap中的Tab折叠4

回答

相关问题