实例
<!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" />
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;color: #8C8C8C;}
a:hover{color: #5C5C5C;font-size: 1.05em;}
.box{
width: 500px;
height: 500px;
background:white;
margin: 30px auto;
border: #ECECEC 1px solid;
}
.header{
background-color: white;
}
.header ul{
overflow: hidden;
}
.header ul li{
/*border: 1px solid red;*/
padding: 6px 20px 7px;
float: left;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.active{
border-top:2px green solid ;
border-bottom:none !important;
}
#more{
display: block;
float: right;
margin-top: -20px;
font-size: 12px;
}
.box .one ul{
text-align: center;
margin-top: 55px;
}
.box .one ul li{
letter-spacing: 9px;
line-height: 25px;
}
</style>
<title>选项卡</title>
</head>
<body>
<div class="box">
<div class="header">
<ul>
<li class="active">热播</li>
<li>视频</li>
<li>头条</li>
<li>花边</li>
</ul>
<span id="more">
<a href="">了解更多>></a>
</span>
</div>
<div class="one"style="display:block;">
<ul>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
<li><a href="#">■ 大魔王来了 街舞选手集体退赛</a></li>
</ul>
</div>
<div style="display: none;" class="one" >
<ul>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
<li><a href="#">■ 联合国亲善大使黄晓明现身活动</a></li>
</ul>
</div>
<div style="display: none;" class="one">
<ul>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
<li><a href="#">■ 张俪朱镇模因聚少离多宣布分手</a></li>
</ul>
</div>
<div style="display: none;" class="one">
<ul>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
<li><a href="#">■ 王俊凯自称成熟很多但还是小孩</a></li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//获取dom中的box类名，在获取下面子元素的ul标签
var box = document.getElementsByClassName('box')[0].getElementsByTagName('ul')[0]
// var header = box.getElementsByClassName('header')[0]
// var ul = box.getElementsByTagName('ul')[0]
//获取ul标签下面的所以li
var li = box.getElementsByTagName('li')
//获取所有的列表块的div
var div = document.getElementsByClassName('one')
//循环函数
//
for (var i = 0;i<li.length;i++ ) {
//给li添加索引属性index 不能添加在html的的属性中 ，浏览器解析的时候会过滤自定义属性
li[i].index = i
//给li添加鼠标事件函数
li[i].onmouseover = function(){
//内循环
for (var i=0;i<li.length;i++) {
//当鼠标移开时设置当前的li类样式为空
li[i].className = ''
//当鼠标移开时设置当前的div块样式隐藏
div[i].style.display = 'none'
}
//加载当前li的类样式
this.className = 'active'
// 加载当前div块的display:block 显示
div[this.index].style.display = 'block'
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
