javacript基础——选项卡

最新推荐文章于 2022-01-17 17:24:43 发布

hello_dengdai

最新推荐文章于 2022-01-17 17:24:43 发布

阅读量128

点赞数

分类专栏： js 文章标签： js基础

本文链接：https://blog.csdn.net/hello_dengdai/article/details/81059604

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>选项卡</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
}
body{
font-size: 14px;
}

#main{
width: 800px;
margin: 40px auto 0 auto;
}

#main .active{
background:url(qiehuan.jpg) no-repeat; color: #cccccc;
}

#main h3{
text-align: center;
width: 182px;
height: 35px;
line-height: 35px;
background: #cccccc;
float: left;
}

#main div{
height: 100px;
width: 546px;
padding: 20px 0 0 20px;
border-top-width: medium;
border-top-style: solid;
border-top-color:#abcdef;
clear: both;
font-size: 14px;
}
</style>
</head>
<body>
<div id="main">
<h3 class="active">绝地求生</h3>
<h3>英雄联盟</h3> 1
<h3>魔兽世界</h3>
<div style="display: block;">落定成盒,下次吃鸡</div>
<div style="display: none;">大撸伤身,小撸怡情</div>
<div style="display: none;">德玛西亚万岁</div>
</div>
<script type="text/javascript">
//先获取外围最大的div
var main = document.getElementById('main');
//再获取 h3
var aH3 = main.getElementsByTagName('h3');
//获取 div
var divs = main.getElementsByTagName('div');

//循环每一个按钮
for (var i = 0; i< aH3.length;i++) {
aH3[i].index=i; //给每一个选项卡编号第一个选项卡编号 0 以此类推关键
aH3[i].onmouseover = function(){
//在从第一个选项卡切换到另外选项卡的时候先去除所有的样式
for (var i = 0; i< aH3.length;i++) {
aH3[i].className = "";
divs[i].style.display= "none";

}

this.className = "active";
//alert(this.index);
divs[this.index].style.display= "block"; //如果是i i是已经循环完毕的值 3
}
}
</script>
</body>
</html>

hello_dengdai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javacript基础——选项卡

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;选项卡&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; list-style-
复制链接

扫一扫