版权声明：可任意转载，转载注明出处。 https://blog.csdn.net/Handsome_fan/article/details/70456153 </div>
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-5edb848729.css">
<div class="htmledit_views" id="content_views">
本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Tab效果
</title>
-
<style type="text/css">
-
ul{
-
list-style: none;
-
}
-
*{
-
margin:
0;
-
padding:
0;
-
}
-
#tab{
-
border:
1px solid
#ccc;
-
margin:
20px auto;
-
width:
403px;
-
border-top: none;
-
}
-
.list
ul{
-
overflow: hidden;
-
}
-
.list
li{
-
float: left;
-
}
-
.list
li{
-
padding-left:
28px;
-
padding-right:
28px;
-
padding-top:
6px;
-
padding-bottom:
6px;
-
border:
1px solid
#ccc;
-
background:
-moz-linear-gradient(top, #FEFEFE, #EDEDED);
-
background:
-webkit-gradient(linear,left top,left bottom, from(#fefefe),
to(#ededed));
-
border-right: none;
-
cursor: pointer;
-
}
-
#listCon{
-
height:
100px;
-
}
-
#listCon
div{
-
padding:
10px;
-
position:absolute;
-
opacity:
0;
-
filter:
alpha(opacity=0);
-
}
-
.list
li
:first-child{
-
border-left: none;
-
}
-
.list
li
:hover{
-
background:
#fff;
-
border-bottom: none;
-
}
-
.list
li
.cur{
-
background:
#fff;
-
border-bottom: none;
-
}
-
#listCon
div
.cur{
-
opacity:
1;
-
filter:
alpha(opacity=100);
-
}
-
</style>
-
</head>
-
<body>
-
<div id="tab">
-
<div class="list">
-
<ul>
-
<li class="cur">许嵩
</li>
-
<li>周杰伦
</li>
-
<li>林俊杰
</li>
-
<li>陈奕迅
</li>
-
</ul>
-
</div>
-
<div id="listCon">
-
<div class="cur">断桥残雪、千百度、幻听、想象之中
</div>
-
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话
</div>
-
<div>被风吹过的夏天、江南、一千年以后
</div>
-
<div>十年、K歌之王、浮夸
</div>
-
</div>
-
</div>
-
<script type="text/javascript">
-
window.onload =
function(){
-
var oDiv =
document.getElementById(
"tab");
-
var lis = oDiv.getElementsByTagName(
"li");
-
var oDivCon =
document.getElementById(
"listCon");
-
var lisDiv = oDivCon.getElementsByTagName(
"div");
-
for(
var i=
0;i<lis.length;i++){
-
lis[i].index = i;
-
lis[i].onmouseover =
function(){
-
show(
this.index);
-
}
-
}
-
function show(a){
-
for(
var j=
0;j<lis.length;j++){
-
lis[j].className =
"";
-
lisDiv[j].className =
"";
-
}
-
lis[a].className =
"cur";
-
lisDiv[a].className =
"cur";
-
}
-
}
-
</script>
-
</body>
-
</html>
版权声明：可任意转载，转载注明出处。 https://blog.csdn.net/Handsome_fan/article/details/70456153 </div>
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-5edb848729.css">
<div class="htmledit_views" id="content_views">