📅 最后修改于: 2023-12-03 15:13:41.863000 🧑 作者: Mango
Bootstrap 是一个流行的前端框架，可以方便地创建响应式，现代化的 Web 应用程序。其中一个重要的组件是标签。在本文中，我们将介绍如何使用 JavaScript 在 Bootstrap 标签中设置活动标签。
Bootstrap 标签可以用于在用户界面中展示和切换不同的内容。活动标签指的是当前选中的标签，通常用于与其他内容区分开来。要设置活动标签，可以使用 JavaScript。
下面是一个例子，展示了如何使用 JavaScript 在 Bootstrap 标签中设置活动标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 设置活动标签 JavaScript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</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>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings">Settings</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 adipisicing elit.</p>
</div>
<div id="profile" class="tab-pane fade">
<h3>Profile</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div id="messages" class="tab-pane fade">
<h3>Messages</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div id="settings" class="tab-pane fade">
<h3>Settings</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<script>
$(function() {
$('.nav-link').on('click', function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>
在上面的示例中，我们使用了 Bootstrap 的 nav 和 tab 样式类创建了一个标签，其中第一个标签被设置为活动标签。在 JavaScript 部分，我们使用了 jQuery 的 on() 方法来监听标签的点击事件。当标签被点击时，我们首先移除所有标签的活动样式，然后将当前标签添加活动样式。
本文介绍了如何使用 JavaScript 在 Bootstrap 标签中设置活动标签。通过简单的代码示例，我们展示了如何使用 jQuery 和 Bootstrap 的样式类创建响应式标签。如果您想了解更多有关 Bootstrap 和 JavaScript 的信息，请查看 Bootstrap 文档和 jQuery 文档。