【实用随记】js选项卡

最新推荐文章于 2022-06-27 14:24:19 发布

兔小几

最新推荐文章于 2022-06-27 14:24:19 发布

阅读量278

点赞数

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,h2{
margin:0;
}
body{
font-size:12px;
}
h2{
width:500px;
height:50px;
margin:100px auto 0;
color:red;
border:1px solid gray;
}
h2 span{
width:80px;
height:50px;
line-height:50px;
text-align:center;
float:left;
}
.tab{
color:yellow;
background-color:#999;
cursor:pointer;
}
#tab div{
width:500px;
height:200px;
margin:0 auto;
border:1px solid blue;
display:none;
}
#tab .ct{
display:block;
}

</style>
</head>
<body>
<div id="tab">
<h2>
<span class="tab" οnmοuseοver="changeTab(this)">1</span>
<span οnmοuseοver="changeTab(this)">2</span>
<span οnmοuseοver="changeTab(this)">3</span>
</h2>
<div class="ct">11111111111111111111</div>
<div>222222222222222222</div>
<div>3333333333333333333</div>
</div>

</body>
<script type="text/javascript">
var tabs=document.getElementById("tab").getElementsByTagName("span");
var cts=document.getElementById("tab").getElementsByTagName("div");
function changeTab(mouseover){
for(i=0;i<tabs.length;i++){
if(tabs[i]==mouseover){
tabs[i].className="tab";
cts[i].className="ct";
}
else{
tabs[i].className="";
cts[i].className="";
}
}
}

</script>
</html>