从bootstrap 4 closed选项卡中删除活动类
，可以通过以下步骤实现：
- 首先，确保你已经引入了Bootstrap的CSS和JavaScript文件，以便使用Bootstrap的组件和功能。
- 在HTML中，找到你想要删除活动类的选项卡元素。通常，选项卡会使用
<ul>和<li>标签进行组织，每个选项卡都有一个包含内容的<div>。 - 在选项卡的
<li>标签中，找到具有活动类的元素。活动类通常是active。 - 使用JavaScript或jQuery，通过移除活动类来删除选项卡的活动状态。你可以使用
removeClass()方法来实现这一点。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages">Messages</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade show active">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="profile" class="tab-pane fade">
<h3>Profile</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div id="messages" class="tab-pane fade">
<h3>Messages</h3>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
// 移除活动类
$(".nav-link.active").removeClass("active");
});
</script>
</body>
</html>在上面的示例中，我们使用了Bootstrap的CSS和JavaScript文件，并创建了一个具有三个选项卡的导航栏。通过使用JavaScript和jQuery，我们在文档准备就绪时，找到具有活动类的选项卡元素，并使用removeClass()方法将其活动类删除。
请注意，这只是一个示例，你可以根据自己的需求进行修改和扩展。另外，腾讯云没有提供与Bootstrap相关的产品或服务，因此无法提供相关链接。
相关·内容
感谢@Eric G，我有一个选项卡窗格，当你点击一个选项卡时，它可以切换打开/关闭。既然标签窗格切换(js移除活动类)，我如何也移除标签本身的活动类呢？我在.active类上的样式显示为“活动选项卡”。当选项卡被切换为关闭时，我想删除该类。
浏览 23提问于2017-01-12得票数 0
回答已采纳
1回答
我要做的是访问选定选项卡中的特定表单。但无论我怎么尝试，onload事件都不会运行，也不会选择所选的选项卡。您必须在选项卡之间来回切换才能触发事件。因此，我的问题是，如果设置了活动选项卡，如何仅在可见或活动选项卡中访问表单元素？
浏览 2提问于2016-02-22得票数 2
当选项卡滑动时，我希望在中删除类活动，并在打开选项卡中添加活动类 $("#accordian li h3").clickul .row").slideUp();
//slide down the link list below the h3 clicked - only
浏览 3提问于2013-08-06得票数 0
回答已采纳
当用户关闭选项卡时，我需要从nav-item中删除活动类。我尝试构建内含文本内容的选项卡。默认情况下，当用户打开页面时，应关闭选项卡。当用户单击选项卡打开它时，它应该将颜色更改为蓝色(因此在这里我可以使用活动类添加样式)，但当它关闭时，它应该将颜色更改为白色。最好的方法是从li中删除活动类，而我则停留在这里。该怎么做呢？不幸的是
浏览 28提问于2019-06-27得票数 1
更新:标签也是Bootstrap标签。换句话说，我在bootstrap选项卡中有一个引导转盘。当你选择'tab‘时，bootstrap会为其他标签触发一个'remove active’。不幸的是，它流到了我的carousel中，并删除了启动carousel所需的项活动类。
Wordpress单品页可选项卡导航选项卡。在某个地方有一个jquery侦听器，可以在单击时删除/
浏览 1提问于2018-06-15得票数 0
1回答
我有3个选项卡，其中一个在页面加载时处于活动状态。我已经将事件与选项卡关联起来了。qtab').on("shown.bs.tab", function(event){ alert(elem);更改选项卡时会显示警报框，而在显示默认选项卡(ID 'q0')时则不会显示警告框。有人知道我如何为默认选项卡触发事件吗？提前谢谢！！
浏览 2提问于2015-08-21得票数 2
回答已采纳
3回答
使用url加载页面上的活动选项卡
、、、、
page=tabs">Programs</a> php url是这样的<ul class="nav nav-tabs faq-cat-tabs">
<li><a href="#faq-cat-1" class="btndata-toggle="tab"><i class="fa fa-
浏览 9提问于2016-10-17得票数 0
回答已采纳
1回答
我正在尝试将jQuery添加到一个网站中，这样当单击导航菜单中下一页的链接时，“活动”类将切换到“活动”或当前页面。"active“类最初也设置为主页。另外，这是一个使用Bootstrap的网站，所以我想知道是否有什么东西与我的jQuery冲突。看起来很简单，而且我的代码在某种程度上是可以工作的。它会从主页中删除活动类，并在下一个选项卡上短暂闪烁，但不会保持“活动
浏览 3提问于2015-04-11得票数 0
其中一个面板的代码如下：<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">What will it cost</a><
浏览 4提问于2013-12-04得票数 0
在twitter bootstrap js选项卡中，我必须向li元素添加一个"active“类。源代码：
浏览 0提问于2011-12-03得票数 10
回答已采纳
2回答
我设置了bootstrap选项卡，以便在锚点上有4个带有活动类的选项卡。class="active"><a href="#">Tab 2</a></li> <li><a href="#"&g
浏览 0提问于2013-05-07得票数 0
回答已采纳
在编辑产品部分，我有一个类似如下的导航选项卡： <li class="nav-item"> </li>
&
浏览 11提问于2020-05-08得票数 0
1回答
我在web应用程序的一部分使用基础选项卡，但是默认的期望行为是关闭文档上的所有选项卡。但是，我无法以这种方式初始化选项卡。由于我没有找到解决此问题的选项，因此我正在尝试从页面上与以下选择器匹配的所有选项卡中删除活动类。
但是，类的移除发生在Foundation应用类之前。如何在添加活动类之后删除它，或者我如何不让它在一开始就添加活动</e
浏览 0提问于2013-06-18得票数 0
回答已采纳
1回答
我有一个bootstrap ui tab angularjs指令，默认情况下将第一个选项卡设置为活动选项卡。这里的问题是，如果您在选项卡中，而不是第一个选项卡中，并尝试刷新页面，因为默认的活动类在第一个选项卡上，所以在刷新时会将第一个选项卡显示为活动的。但是，显示的内容将来自正确的选项卡。Bootstrap指令：
var con
浏览 0提问于2016-03-04得票数 0
我正在试验Bootstrap-Vue中的选项卡。我正在尝试调整活动选项卡上的样式。在https://bootstrap-vue.org/docs/components/tabs#active-classes的文档中，我看到了这个更改活动选项卡样式的示例。text-success"
active-tab-class="font-weight-bold text
浏览 54提问于2021-11-16得票数 1
回答已采纳
1回答
我使用类进行分页。该页面是使用bootstrap开发的，并使用选项卡显示内容。我想在每个选项卡中使用分页。我正在检查URL urlVar参数以更改选项卡的活动状态。因此，当单击第二个选项卡中的页面导航链接时，第一个选项卡urlVar加上第二个选项卡URL将被传递给urlVar，两个选项卡都将被激活。单击第二个选项卡页导航链接时，如何删除第一个选项卡</em
浏览 3提问于2014-07-09得票数 1
1回答
我的问题是:我应该将事件放在一个函数中并在最后调用它，还是应该为按钮事件创建一个循环？我没有设置隐藏菜单的不透明度(我在哪里读到的)，也许这就是问题所在。:) 附注:我在代码片段中看到，当宽度小于800px时，汉堡图标不会出现，但在我的浏览器中工作正常。burgerMenu.classList.toggle('active'); burgerMenu.classList.toggle('<e
浏览 28提问于2021-08-17得票数 0
回答已采纳
我正在使用简单的选项卡；使用css创建。$(".Tabs").click(function(){
这很好，但它不会从以前激活的选项卡中删除类。
浏览 5提问于2014-10-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
