Bootstrap选项卡可以轻松实现
切换内容的效果，下面是一个
简单的
示例，展示如何使用
Bootstrap选项卡来实现垃圾分类的
切换：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垃圾分类</title>
<!-- 引入
Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-
bootstrap/4.5.0/css/
bootstrap.min.css">
<style>
.card {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">垃圾分类</h1>
<ul class="nav nav-
tabs" id="my
Tab" role="
tablist">
<li class="nav-item">
<a class="nav-link active" id="recyclable-
tab" data-toggle="
tab" href="#recyclable" role="
tab" aria-controls="recyclable" aria-selected="true">可回收垃圾</a>
</li>
<li class="nav-item">
<a class="nav-link" id="hazardous-
tab" data-toggle="
tab" href="#hazardous" role="
tab" aria-controls="hazardous" aria-selected="false">有害垃圾</a>
</li>
<li class="nav-item">
<a class="nav-link" id="kitchen-
tab" data-toggle="
tab" href="#kitchen" role="
tab" aria-controls="kitchen" aria-selected="false">厨余垃圾</a>
</li>
<li class="nav-item">
<a class="nav-link" id="other-
tab" data-toggle="
tab" href="#other" role="
tab" aria-controls="other" aria-selected="false">其他垃圾</a>
</li>
</ul>
<div class="
tab-content" id="my
TabContent">
<div class="
tab-pane fade show active" id="recyclable" role="
tabpanel" aria-labelledby="recyclable-
tab">
<div class="card">
<div class="card-body">
<h5 class="card-title">可回收垃圾</h5>
<p class="card-text">可回收垃圾包括纸张、塑料、玻璃、金属等。</p>
<p class="card-text">投放时应尽量保持清洁干燥，避免污染，轻投轻放。</p>
</div>
</div>
</div>
<div class="
tab-pane fade" id="hazardous" role="
tabpanel" aria-labelledby="hazardous-
tab">
<div class="card">
<div class="card-body">
<h5 class="card-title">有害垃圾</h5>
<p class="card-text">有害垃圾包括废电池、废灯管、废药品、废油漆等。</p>
<p class="card-text">投放时应注意分类，不可乱倒，避免破损。</p>
</div>
</div>
</div>
<div class="
tab-pane fade" id="kitchen" role="
tabpanel" aria-labelledby="kitchen-
tab">
<div class="card">
<div class="card-body">
<h5 class="card-title">厨余垃圾</h5>
<p class="card-text">厨余垃圾包括剩饭剩菜、果皮、蔬菜叶子等。</p>
<p class="card-text">投放时应尽量沥干水分，避免污染，轻投轻放。</p>
</div>
</div>
</div>
<div class="
tab-pane fade" id="other" role="
tabpanel" aria-labelledby="other-
tab">
<div class="card">
<div class="card-body">
<h5 class="card-title">其他垃圾</h5>
<p class="card-text">其他垃圾包括烟蒂、尘土、一次性餐具等。</p>
<p class="card-text">投放时应注意分类，避免混入可回收垃圾、厨余垃圾等。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 引入
Bootstrap的JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-
bootstrap/4.5.0/js/
bootstrap.min.js"></script>
</body>
</html>
```
在上面的
示例中，我们使用了
Bootstrap提供的`nav`和`
tab`组件来实现
选项卡的效果。首先，我们在页面上创建一个`nav`标签，并为其设置`nav-
tabs`样式类。然后，在`nav`标签中创建多个`a`标签，每个`a`标签代表一个
选项卡，其中`data-toggle="
tab"`属性表示点击该
选项卡时，显示与之对应的`
tab-pane`内容。具体来说，我们为每个`a`标签设置了`href`属性，该属性的值是对应的`
tab-pane`元素的id，例如`#recyclable`表示可回收垃圾的`
tab-pane`元素。最后，我们在页面中创建了多个`
tab-pane`元素，每个`
tab-pane`元素的`id`属性与相应的`a`标签的`href`属性相同，`
tab-pane`元素中包含了垃圾分类的相关信息。
在页面加载完成后，我们通过引入
Bootstrap提供的JS文件，来初始化
选项卡组件。具体来说，我们使用`data-toggle`属性来告诉
Bootstrap，当用户点击
选项卡时，
切换`
tab-pane`元素的显示状态。在初始化过程中，
Bootstrap会为每个`a`标签添加一个`click`事件监听器，当用户点击该标签时，会根据`href`属性值来查找对应的`
tab-pane`元素，并为其添加或移除`show`、`active`样式类，从而实现
切换内容的效果。
上述
示例只是一个
简单的演示，你可以根据自己的需要进行修改和扩展。
1680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
