实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
.box{
width: 400px;
height: 220px;
background-color: white;
border:1px solid red;
color: red;
margin: auto;
}
.box > ul{
margin: 0;
padding: 0;
/*background-color: yellow;*/
overflow: hidden;
}
.box >ul li{
list-style-type: none;
width: 90px;
height: 36px;
float: left;
border-right: 1px solid red;
border-bottom: 1px solid red;
text-align: center;
line-height: 36PX;
}
.box li.active {
background-color: #fff;
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
}
.box div{
display: none;
}
.box div ul{
margin:0;
padding: 20px;
list-style-type: none;
}
.box div ul li {
line-height: 1.5em;
}
.box div ul li a {
color: grey;
text-decoration: none;
}
.box div ul li a:hover{
color: black;
}
.box div ul li span {
float: right;
color: red;
}
/* .box ul+span{
float: right;
}*/
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div style="display:block;">
<ul>
<li><a href="">1.1 第一章</a><span>2018-04-01</span></li>
<li><a href="">1.2 第一章</a><span>2018-04-01</span></li>
<li><a href="">1.3 第一章</a><span>2018-04-01</span></li>
<li><a href="">1.4 第一章</a><span>2018-04-01</span></li>
<li><a href="">1.5 第一章</a><span>2018-04-01</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">2.1 第二章</a><span>2018-04-01</span></li>
<li><a href="">2.2 第二章</a><span>2018-04-01</span></li>
<li><a href="">2.3 第二章</a><span>2018-04-01</span></li>
<li><a href="">2.4 第二章</a><span>2018-04-01</span></li>
<li><a href="">2.5 第二章</a><span>2018-04-01</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">3.1 第三章</a><span>2018-04-01</span></li>
<li><a href="">3.2 第三章</a><span>2018-04-01</span></li>
<li><a href="">3.3 第三章</a><span>2018-04-01</span></li>
<li><a href="">3.4 第三章</a><span>2018-04-01</span></li>
<li><a href="">3.5 第三章</a><span>2018-04-01</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">4.1 第四章</a><span>2018-04-01</span></li>
<li><a href="">4.2 第四章</a><span>2018-04-01</span></li>
<li><a href="">4.3 第四章</a><span>2018-04-01</span></li>
<li><a href="">4.4 第四章</a><span>2018-04-01</span></li>
<li><a href="">4.5 第四章</a><span>2018-04-01</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
