<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>李昊哲-小课</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.detail {
position: relative;
top: 30px;
left: 30px;
}
.ETtab {
width: 990px;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
position: absolute;
background: #f7f7f7;
color: #666;
}
ul>li {
list-style: none;
float: left;
font-size: 14px;
width: 160px;
height: 38px;
line-height: 38px;
text-align: center;
cursor: pointer;
}
.current {
background-color: #e4393c;
color: #fff;
cursor: default;
}
.extra {
text-align: center;
background-color: #df3033;
color: #fff;
cursor: pointer;
width: 94px;
height: 32px;
line-height: 32px;
position: absolute;
right: 15px;
top: 3px;
}
.tab-con {
color: #666;
background: #fff;
position: absolute;
top: 40px;
padding: 30px;
font-size: 66px;
}
.hidden {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="detail">
<div class="ETtab">
<ul>
<li class="current">商品介绍</li>
<li>规格包装</li>
<li>售后保障</li>
<li>商品评价(66)</li>
<li>手机社区</li>
</ul>
<div class="extra">
加入购物车
</div>
</div>
<div class="tab-con">
<div class="show">
商品介绍
</div>
<div class="hidden">
规格包装
</div>
<div class="hidden">
售后保障
</div>
<div class="hidden">
商品评价
</div>
<div class="hidden">
手机社区
</div>
</div>
</div>
</body>
</html>
<script>
window.addEventListener('DOMContentLoaded', function() {
let ul = window.document.querySelector('.ETtab > ul');
// console.log(ul.childElementCount);
// li 数量
liCount = ul.childElementCount;
ul.addEventListener('click', function(e) {
// console.log(ul.children);
// 获取 所有 li
lis = ul.children;
// 详情 index
let currentIndex = 0;
for (let index = 0; index < liCount; index++) {
// 遍历获取 li
const li = lis[index];
// 移除 current 样式
li.classList.remove('current')
if (li == e.target) {
// 如果当前点击的节点 与 遍历的节点为相同节点 则将当前 index 赋值给 currentIndex
currentIndex = index;
}
}
// e.target.classList.toggle('current');
// 添加 current 样式
e.target.classList.add('current');
// 获取详情 容器
let tabOn = window.document.querySelector('.tab-con');
// 获取 所有 详情列表
let tabs = tabOn.children;
// 遍历详情列表
for (let tab of tabs) {
// 如果 css样式中包含类样式 show
if (tab.classList.contains('show')) {
// 移除类样式 show
tab.classList.remove('show');
// 添加类样式 hidden
tab.classList.add('hidden');
}
}
// 移除当前点击详情类样式 hidden
tabs[currentIndex].classList.remove('hidden');
// 添加当前点击详情类样式 show
tabs[currentIndex].classList.add('show');
});
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188746.html
