知识点
- 排他思想：有我无他。上面五个li和下面五个li，只有一个可以有class='selected’和display:block
- 闭包 && 为标签增加我们需要的属性
- 设置class的时候，必须通过className，不能直接通过class
运行效果
点击不同标签显示不同内容
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="tab">
<!--头部-->
<div id="tab_header">
<ul>
<li class="selected">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<!--内容-->
<div id="tab_content">
<div class="dom" style="display: block">
<ul>
<li><a href="">数据七夕·金牛爱送玫瑰花</a></li>
<li><a href="">阿里打造"互联网监管"</a></li>
<li><a href="">10万家店60万新品</a></li>
<li><a href="">全球最大网上时装周</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="">123</a></li>
<li><a href="">234</a></li>
<li><a href="">345</a></li>
<li><a href="">456</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="">qwe</a></li>
<li><a href="">asd</a></li>
<li><a href="">zxc</a></li>
<li><a href="">dfz</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="">1az</a></li>
<li><a href="">2ws</a></li>
<li><a href="">3df</a></li>
<li><a href="">4fg</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="">!@#</a></li>
<li><a href="">%^&</a></li>
<li><a href="">*%^</a></li>
<li><a href="">%$#</a></li>
</ul>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
css
*{
margin: 0;
padding: 0;
list-style: none;
}
html{
font-size: 10px;
}
a{
text-decoration: none;
color: #000000;
}
#tab{
width: 50rem;
height: 12rem;
border: 0.1rem solid #cccccc;
margin: 10rem auto;
}
#tab>#tab_header{
height: 3rem;
width: 100%;
/*background-color: red;*/
}
#tab>#tab_header>ul{
display: flex;
justify-content: space-around;
height: 100%;
text-align: center;
}
#tab>#tab_header>ul>li{
background-color: #cccccc;
height: 100%;
width: 100%;
font-size: 1.5rem;
line-height: 3rem;
cursor: pointer;
}
#tab>#tab_header>ul>li:hover{
color:#ff6700;
}
#tab>#tab_header>ul>.selected{
background-color: white !important;
border-bottom: none !important;
}
#tab>#tab_content{
height: 9rem;
width: 100%;
position: relative;
}
#tab>#tab_content>div{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#tab>#tab_content>div>ul{
height: 100%;
display: flex;
flex-wrap: wrap;
text-align: center;
}
#tab>#tab_content>div>ul>li{
height: 4.5rem;
width:50%;
line-height: 4.5rem;
font-size: 1.7rem;
}
#tab>#tab_content>div>ul>li>a:hover{
color:#ff6700;
}
JavaScript
①闭包实现
window.onload = function (ev) {
// 1. 获取标签
var allLis = $('tab_header').getElementsByTagName('li');
var allDom = $('tab_content').getElementsByClassName('dom');
// 2. 遍历监听
for (var i = 0; i < allLis.length; i++) {
var li = allLis[i];
(function (index) {
li.addEventListener('mouseover',function (evt) {
// 2.1 清楚同级别选中样式雷
for (var j = 0; j < allLis.length; j++) {
allLis[j].className = '';
allDom[j].style.display ='none';
}
// 2.2 设置当前li标签选中样式类
this.className = 'selected'; //必须通过className，不能直接通过class
allDom[index].style.display = 'block';
})
})(i);
}
/**
* 根据id返回获取节点元素
* @param {string}id
* @returns {any}
*/
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : null;
}
};
② 为li增加新的属性记录
window.onload = function (ev) {
// 1. 获取标签
var allLis = $('tab_header').getElementsByTagName('li');
var allDom = $('tab_content').getElementsByClassName('dom');
// 2. 遍历监听
for (var i = 0; i < allLis.length; i++) {
var li = allLis[i];
li.index = i;
li.addEventListener('mouseover',function (evt) {
// 2.1 清楚同级别选中样式雷
for (var j = 0; j < allLis.length; j++) {
allLis[j].className = '';
allDom[j].style.display ='none';
}
// 2.2 设置当前li标签选中样式类
this.className = 'selected'; //必须通过className，不能直接通过class
allDom[this.index].style.display = 'block';
})
}
/**
* 根据id返回获取节点元素
* @param {string}id
* @returns {any}
*/
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : null;
}
};
