让我来为你详细讲解如何使用div和CSS实现tabs标签。
一、思路
假设我们需要实现一个tabs标签，首先需要以下几步：
- 将标签划分为两部分：内容区和导航区；
- 内容区包含全部标签页的内容，导航区用于切换标签页；
- 导航区的每个按钮都有一个相对应的标签页，点击导航区的某个按钮可以显示对应的标签页；
- 显示的标签页需要隐藏其他标签页，以显示当前标签页的内容。
基于以上思路，我们可以实现一个简单的tabs标签。
二、示例代码
以下代码实现了一个带有三个标签页的tabs标签，点击导航区的按钮可以切换标签页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs标签页</title>
<style>
/*定义标签页的样式*/
.tabs {
width: 800px;
margin: 50px auto;
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ccc;
}
/*定义导航区的样式*/
.tabs-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
/*定义导航按钮的样式*/
.tabs-nav li {
margin: 0 10px;
padding: 5px;
cursor: pointer;
font-weight: bold;
border: 1px solid #ccc;
border-radius: 5px;
}
/*定义标签页内容区的样式*/
.tabs-content div {
display: none; /*默认情况下内容区域不显示*/
padding: 10px;
line-height: 1.6;
}
/*定义选中标签页的样式*/
.tabs-nav li.active {
background-color: #ccc;
}
/*定义选中标签页对应子内容的样式*/
.tabs-content div.active {
display: block; /*选中标签页的子内容显示*/
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 5px 5px 5px;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="tabs-nav">
<li class="active">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="tabs-content">
<div class="active">标签1的内容...</div>
<div>标签2的内容...</div>
<div>标签3的内容...</div>
</div>
</div>
<!-- 导航按钮的点击事件 -->
<script>
var tabs = document.querySelector(".tabs");
var nav = tabs.querySelectorAll(".tabs-nav li");
var content = tabs.querySelectorAll(".tabs-content div");
for (var i = 0; i < nav.length; i++) {
nav[i].onclick = function(){
// 切换导航按钮样式
for (var j = 0; j < nav.length; j++) {
nav[j].classList.remove("active");
}
this.classList.add("active");
// 切换内容区域样式
for (var k = 0; k < content.length; k++) {
content[k].classList.remove("active");
}
var index = this.getAttribute("data-index");
content[index].classList.add("active");
}
// 给每个导航按钮添加自定义属性 data-index
nav[i].setAttribute("data-index",i);
}
</script>
</body>
</html>
在上述代码中，我们首先定义了整个tabs标签的样式，分别为导航区、导航按钮、标签页内容区和选中标签页。在HTML中，我们将导航区和标签页内容区分别用ul和div实现，并将标签页内容区中的每个标签页都包裹在一个div中。
接着，我们通过JavaScript代码实现了导航按钮的点击事件。点击某个导航按钮后，切换该按钮的样式以及对应的标签页的样式。
三、示例说明
以上示例实现了一个比较简单的tabs标签，下面再提供两个更加复杂的使用示例：
示例1：基于bootstrap的tabs标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs标签页</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<style>
/*自定义标签页*/
.tabs .nav-link {
color: #333;
background-color: #f5f5f5;
border: none;
border-radius: 0;
}
/*选中标签页*/
.tabs .nav-link.active {
background-color: #fff;
color: #333;
border: none;
border-bottom-color: #fff;
}
/*标签页内容区*/
.tabs .tab-pane {
padding: 10px;
background-color: #fff;
border-top: none;
border: 1px solid #ccc;
border-radius: 0 0 5px 5px;
}
/*选中标签页内容区*/
.tabs .tab-pane.active {
display: block;
}
</style>
</head>
<body>
<div class="container">
<h2>基于bootstrap的Tabs标签页</h2>
<div class="col-md-8 mx-auto">
<ul class="nav nav-tabs tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1">标签1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2">标签2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3">标签3</a>
</li>
</ul>
<div class="tab-content tabs">
<div class="tab-pane fade show active" id="tab1">标签1的内容...</div>
<div class="tab-pane fade" id="tab2">标签2的内容...</div>
<div class="tab-pane fade" id="tab3">标签3的内容...</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在以上示例中，我们使用了Bootstrap提供的tabs组件来实现标签页，通过自定义样式来达到我们想要的效果。
示例2：响应式Tabs标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式Tabs标签页</title>
<style>
body {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
background-color: #fff;
margin: 0;
}
.tabs {
padding: 0;
margin: 0;
list-style: none;
}
.tabs li {
float: left;
margin-right: 10px;
padding: 5px 10px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-bottom: none;
cursor: pointer;
}
.tabs li.active {
background-color: #fff;
border-bottom: 1px solid #ccc;
}
.tabs-content div {
display: none;
padding: 10px;
border: 1px solid #ccc;
border-top: none;
clear: both;
background-color: #fff;
}
.tabs-content div.active {
display: block;
}
@media (max-width: 767px) { /*小屏幕设备样式*/
.tabs li {
display: block;
float: none;
margin: 0;
border-bottom: 1px solid #ccc;
}
}
</style>
</head>
<body>
<div class="container">
<h2>响应式Tabs标签页</h2>
<div class="col-md-8 mx-auto">
<ul class="tabs">
<li class="active">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="tabs-content">
<div class="active">标签1的内容...</div>
<div>标签2的内容...</div>
<div>标签3的内容...</div>
</div>
</div>
</div>
<script>
var tabs = document.querySelector(".tabs");
var nav = tabs.querySelectorAll("li");
var content = tabs.querySelectorAll(".tabs-content div");
for (var i = 0; i < nav.length; i++) {
nav[i].onclick = function(){
for (var j = 0; j < nav.length; j++) {
nav[j].classList.remove("active");
}
this.classList.add("active");
for (var k = 0; k < content.length; k++) {
content[k].classList.remove("active");
}
var index = this.getAttribute("data-index");
content[index].classList.add("active");
}
nav[i].setAttribute("data-index",i);
}
</script>
</body>
</html>
该示例实现了一个响应式tabs标签，当浏览器窗口大小变化时导航区的样式会发生变化，使得在小屏幕设备上也可以正常显示。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：div css 实现tabs标签的思路及示例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 