实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>实战1：选项卡</title>
<style type="text/css">
.box {
width: 538px;
height: 500px;
background-color: #A9A9A9;
border: 1px solid red;
margin: 20px auto;
color: #363636;
}
h3 {
text-align: center;
color: skyblue;
}
.box > ul {
margin: 0;
padding: 0;
background-color: #A9A9A9;
overflow: hidden;
}
.box > ul li {
list-style-type: none;
width: 90px;
height: 36px;
float: left;
border-right: 1px solid #696969;
border-bottom: 1px solid #696969;
text-align: center;
line-height: 36px;
}
.box ul + span {
float:right;
width:90px;
height: 36px;
line-height: 36px;
margin-top: -36px;
}
.box ul + span> a {
text-decoration: none;
color: #696969;
}
.box li.active {
background-color: #A9A9A9;
font-weight: border;
border-bottom: none;
border-top: 3px solid blue;
}
.box div{
display: none;
}
.box div ul {
margin: 0px;
padding: 10px;
list-style-type: none;
}
.box div ul li {
line-height: 1.5em;
}
.box div ul li a {
text-decoration: none;
color: #636363;
}
.box div ul li a:hover{
color: red;
font-size: 1.2em
}
.box div ul li span {
float: right;
color: red;
}
</style>
</head>
<body>
<h3>选项卡实战</h3>
<div class="box">
<ul>
<li class="active">技术文章</li>
<li>网站源码</li>
<li>原生手册</li>
<li>推荐博文</li>
</ul>
<span><a href="">更多下载>></a></span>
<div style="display: block;">
<ul>
<li><a href="">Js教程 | Ajax如何实现城市二级联动</a><span>2018-04-22</span></li>
<li><a href="">Js教程 | Ajax如何实现城市二级联动</a><span>2018-04-22</span></li>
<li><a href="">Js教程 | Ajax如何实现城市二级联动</a><span>2018-04-22</span></li>
<li><a href="">Js教程 | Ajax如何实现城市二级联动</a><span>2018-04-22</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">前段模板 | 钻石小鸟模板</a><span>2018-04-22</span></li>
<li><a href="">前段模板 | 钻石小鸟模板</a><span>2018-04-22</span></li>
<li><a href="">前段模板 | 钻石小鸟模板</a><span>2018-04-22</span></li>
<li><a href="">前段模板 | 钻石小鸟模板</a><span>2018-04-22</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">Mysql | Mysql5.1下载</a><span>2018-04-22</span></li>
<li><a href="">Mysql | Mysql5.1下载</a><span>2018-04-22</span></li>
<li><a href="">Mysql | Mysql5.1下载</a><span>2018-04-22</span></li>
<li><a href="">Mysql | Mysql5.1下载</a><span>2018-04-22</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">推荐博文 | 0330两个Js小暗雷</a><span>2018-04-22</span></li>
<li><a href="">推荐博文 | 0330两个Js小暗雷</a><span>2018-04-22</span></li>
<li><a href="">推荐博文 | 0330两个Js小暗雷</a><span>2018-04-22</span></li>
<li><a href="">推荐博文 | 0330两个Js小暗雷</a><span>2018-04-22</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0]
var ul = box.getElementsByTagName('ul')[0]
var tab = ul.getElementsByTagName('li')
var list = box.getElementsByTagName('div')
for (var i=0; i<tab.length; i++) {
tab[i].index = i
tab[i].onmouseover = function (){
for (var i=0; i<tab.length; i++) {
tab[i].className = ''
list[i].style.display = 'none'
}
this.className = 'active'
list[this.index].style.display = 'block'
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
