学习来源:https://www.bilibili.com/video/BV1HJ41147DG
要求
鼠标点击上面相应的选项卡,下面的内容随之变化
思路
1.点击上部的 li,当前 li 添加 current 类,其余兄弟移除类。
2.点击的同时,得到当前 li 的索引号
3.让下部里面相应索引号的 item 显示,其余的 item 隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tab栏切换</title>
<script src="../../jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
/* 盒子大小为 width,padding和border不会撑大盒子 */
box-sizing: border-box;
}
body {
/* css3抗锯齿形,让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
/* \5B8B\4F53 宋体 避免浏览器解析CSS代码时候出现乱码的问题 */
font: 14px/1 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
color: #333;
}
.tab {
width: 1226px;
margin: 100px auto;
}
.tab_list {
height: 40px;
line-height: 40px;
background-color: #fafafa;
border-bottom: 1px solid #e85356;
}
.tab_list li {
float: left;
padding: 0 20px;
font-size: 16px;
list-style: none;
list-style-type: none;
cursor: pointer;
}
.current {
color: #fff;
background-color: #c81623;
}
.tab_con {
margin-left: 50px;
}
.tab .tab_con caption {
margin: 32px 0;
text-align: left;
}
.tab .tab_con tr td {
line-height: 24px;
padding-right: 60px;
}
</style>
<script>
$(function () {
$('.tab_list li').click(function () {
// 点击上部的 li,当前 li 添加 current 类,其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 点击的同时,得到当前 li 的索引号
var index = $(this).index();
// 让下部里面相应索引号的 item 显示,其余的 item 隐藏
$('.tab_con .item').eq(index).show().siblings().hide();
})
})
</script>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(1.1万+)</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
<table>
<caption>品牌:康佳( KONKA )</caption>
<tr>
<td>商品名称:康佳B65U</td>
<td>商品编号:8514653</td>
<td>商品毛重:31.35kg</td>
</tr>
<tr>
<td>观看距离:3m-3.5m ( 56-65英寸 )</td>
<td>分辨率:4k超高清 ( 3840x2160 )</td>
<td>电视类型:人工智能、大屏、4k超清</td>
</tr>
<tr>
<td>屏幕尺寸:65英寸</td>
<td>选购指数:10.0-8.0</td>
<td></td>
</tr>
</table>
</div>
<div class="item" style="display: none;">
规格与包装模块内容
</div>
<div class="item" style="display: none;">
售后保障模块内容
</div>
<div class="item" style="display: none;">
商品评价(1.1万+)模块内容
</div>
</div>
</div>
</body>
</html>