什么是Tab选项卡:
指将不同的内容重叠放置在某一布局区块内，重叠的内容区里的每次只有其中一层是可见的，用户通过鼠标点击或移到内容区所对应的标签上，来请求显示该层内容区。
Tab选项卡的作用:
- 可以方便地在不同视图间浏览和切换。
- 提供了显示分组内容的功能。
- 简明扼要的描述了与标签相关的分组的内容。
1.制作的Tab选项卡效果图，如下：
2.思路：
- 分析网页结构
- 需求分析
- 书写代码
3.相应的代码，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100vh;
background-color: #282c34;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 800px;
}
/*导航区样式*/
.box .tabNav {
width: 800px;
height: 50px;
}
.box .tabNav ul {
display: flex;
}
.box .tabNav li {
width: 120px;
height: 30px;
padding: 10px 20px;
background: #e5e9ea;
list-style: none;
margin-right: 2px;
text-align: center;
line-height: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #607291;
cursor: pointer;
display: flex;
position: relative;
overflow: hidden;
}
.box .tabNav li img {
width: 20px;
opacity: 0.3;
transition: opacity 0.3s;
position: absolute;
top: 15px;
left: 50px;
}
.box .tabNav li:hover img {
opacity: 1;
}
.box .tabNav li h4 {
font-size: 15px;
position: absolute;
left: 80px;
}
.box .tabNav .active {
background: #f9f9f9;
}
/*内容区样式*/
.box .tabContent {
width: 798px;
background: #f9f9f9;
position: relative;
min-height: 280px;
color: #607291;
}
.box .tabContent div {
width: 798px;
text-align: center;
display: none;
}
.box .tabContent img {
position: absolute;
top: 70px;
left: 40px;
}
.box .tabContent h2 {
position: absolute;
top: 20px;
left: 210px;
}
.box .tabContent p {
width: 558px;
position: absolute;
top: 70px;
left: 210px;
text-align: justify;
text-indent: 2em;
line-height: 25px;
letter-spacing: 2px;
font-size: 18px;
}
.box .tabContent button {
width: 100px;
height: 30px;
position: absolute;
bottom: 20px;
right: 30px;
}
.box .tabContent button a {
text-decoration: none;
}
.box .tabContent .show {
display: block;
}
</style>
</head>
<body>
<!--最外面的盒子-->
<div class="box">
<!--导航区-->
<div class="tabNav">
<ul>
<li class="active">
<img src="file:///D:/web前端/作业/Tab选项卡/image/字节.png" alt="">
<h4>字节</h4>
</li>
<li>
<img src="file:///D:/web前端/作业/Tab选项卡/image/阿里.png" alt="">
<h4>阿里</h4>
</li>
<li>
<img src="file:///D:/web前端/作业/Tab选项卡/image/腾讯.png" alt="">
<h4>腾讯</h4>
</li>
<li>
<img src="file:///D:/web前端/作业/Tab选项卡/image/京东.png" alt="">
<h4>京东</h4>
</li>
<li>
<img src="file:///D:/web前端/作业/Tab选项卡/image/百度.png" alt="">
<h4>百度</h4>
</li>
</ul>
</div>
<!--内容区-->
<div class="tabContent">
<!--字节内容区-->
<div class="show">
<img src="file:///D:/web前端/作业/Tab选项卡/image/字节跳动01.png" alt="">
<h2>字节</h2>
<p>字节跳动，是一家位于中国北京的跨国互联网技术公司 ，成立于2012年3月，
旗下有产品今日头条和抖音（及其海外版本TikTok）等。至2018年，字节跳动的
移动应用月度用户超过十亿人，估值750亿美元，超越 Uber 成为全球最有价值的
创业公司 。
</p>
<button><a href="https://www.bytedance.com">Look at all ></a></button>
</div>
<!--阿里内容区-->
<div>
<img src="file:///D:/web前端/作业/Tab选项卡/image/阿里巴巴01.png" alt="">
<h2>阿里</h2>
<p>阿里巴巴创建于1998年年底，总部设在香港（国际总部）及杭州（中国总部），
并在海外设立美国硅谷、伦敦等分支机构 。阿里巴巴是目前全球最大的网上贸易市场，
已成为全球首家拥有210万商人的电子商务网站，被商人们评为"最受欢迎的B2B网站"。
</p>
<button><a href="https://www.alibabagroup.com">Look at all ></a></button>
</div>
<!--腾讯内容区-->
<div>
<img src="file:///D:/web前端/作业/Tab选项卡/image/腾讯01.png" alt="">
<h2>腾讯</h2>
<p>腾讯公司成立于1998年11月，是目前中国最大的互联网综合服务提供商 之一，
也是中国服务用户最多的互联网企业之一。成立15年多以来，腾讯一直秉承一切以
用户价值为依归的经营理念 ，始终处于稳健、高速发展的状态;并正以前所未有的
速度改变着人们的生活方式，创造着更广阔的互联网应用前景。
</p>
<button><a href="https://www.tencent.com">Look at all ></a></button>
</div>
<!--京东内容区-->
<div>
<img src="file:///D:/web前端/作业/Tab选项卡/image/京东01.png" alt="">
<h2>京东</h2>
<p>京东于2004年正式涉足电商领域。2014年5月，京东集团在美国纳斯达克证券
交易所正式挂牌上市，是中国第一个成功赴美上市的综合型电商平台。京东集团定
位于"以供应链为基础的技术与服务企业"，目前业务已涉及零售、科技、物流、健
康、保险、产发、海外和工业品等领域。
</p>
<button><a href="https://www.jd.com">Look at all ></a></button>
</div>
<!--百度内容区-->
<div>
<img src="file:///D:/web前端/作业/Tab选项卡/image/百度01.png" alt="">
<h2>百度</h2>
<p>百度公司2000年1月1日创立于中关村,创始人李彦宏拥有“超链分析”技术
专利，也使中国成为美国、俄罗斯、和韩国之外，全球仅有的4个拥有搜索引擎核心
技术的国家之一。百度每天响应来自100余个国家和地区的数十亿次搜索请求，是网
民获取中文信息和服务的最主要入口，服务10亿互联网用户。
</p>
<button><a href="https://www.baidu.com">Look at all ></a></button>
</div>
</div>
</div>
<script>
//需求分析:
//1.当点击li时,被点击的li需要添加选中样式,其他的li需要回归默认样式
//2.让当前li所对应的div内容,显示出来,并且其他的div要隐藏
//找事件源
//先找事件源的容器(它的父级)
var tabNav = document.getElementsByClassName("tabNav")[0];
//再找事件源
var tabLis = tabNav.getElementsByTagName("li")
//找到对应操作的div
var tabContent = document.getElementsByClassName("tabContent")[0]
var tabContentDivs = tabContent.getElementsByTagName("div")
//依次的拿出li标签,分别添加对应的点击事件
for (var n = 0; n < tabLis.length; n++) {
//分发索引值
tabLis[n].index = n;
tabLis[n].onclick = function() {
//this对象(谁触发的事件，this对象就指向谁)
//排它法：先清除所有与它相关的类名（因为要通过类名将原本选中样式清除），然后让指定元素添加上"选中样式"
for (var j = 0; j < tabLis.length; j++) { //清除所有li的className
tabLis[j].className = ""
}
this.className = "active";
//找到当前点击li所对应的div
//console.log(tabContentDivs[this.index])
for (var i = 0; i < tabContentDivs.length; i++) { //清除所有div的className
tabContentDivs[i].className = ""
}
tabContentDivs[this.index].className = "show"
}
}
</script>
</body>
</html>
4.代码图片，如下：
5.补充：
事件编程的三要素：
- 事件源（谁触发的这个事件）。
- 事件（点击、鼠标进入、键盘输入等）。
- 事件处理函数（当发生事件时，要做什么事）。
1295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
