切换Bootstrap 4导航选项卡上的样式
切换Bootstrap 4导航选项卡上的样式
提问于 2018-09-29 05:12:42
我一直在尝试设置nav-tabs的样式，以便当前选项卡在被选中时始终具有不同的外观。我设置了这个用于测试的最小文件。单击选项卡时，内容会正确更改，但我不知道如何将CSS样式应用于当前选定的选项卡。
我在文件中做错了什么吗？考虑到该文档调用的当前资源，是否有一种简单的方法来完成样式设置(如更改活动选项卡的背景颜色)？我的目标是在不使用任何额外的javascript的情况下尽可能地减少项目的占用空间。
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="nav-item active">
<a href="#first10" data-toggle="tab">First</a>
</li>
<li class="nav-item">
<a href="#second10" data-toggle="tab">Second</a>
</li>
</ul>
<div class="tab-content">
<div id="first10" class="tab-pane active">
<h2>First</h2>
</div>
<div id="second10" class="tab-pane">
<h2>Second</h2>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
回答 1
Stack Overflow用户
发布于 2018-09-29 05:27:00
在选项卡上的单击事件上添加具有首选样式的类。
指定标签的特定ID，如#Tab1和#Tab2
尝试：
$('#Tab1').on('click', function () {
$('#Tab1').addClass('active');
$('#Tab2').removeClass('active');
});然后对第二个选项卡执行相反的操作。
$('#Tab2').on('click', function () {
$('#Tab2').addClass('active');
$('#Tab1').removeClass('active');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52562719
复制相关文章
相似问题