案例二、自定义选项卡

来源：互联网发布：淘宝假冒产品邮件申诉编辑：程序博客网时间：2024/05/20 05:11

做一个自定义的选项卡，不支持getElementByClassName的浏览器可以通过querySelector（'.classname'）来获得，通过querySelectorAll（'.classname'）可以获得所有符合条件的className的数组

<!DOCTYPE html>

<html>
<head>
<meta charset = "utf-8"/>
<title>frame 框架</title>

//清除默认样式

*{
margin: 0;
padding: 0;
}
.nav_body{
width: 600px;
height: 400px;
margin: 0 auto;
background:#8bc34a;
}
.nav_top{
height: 50px;
background: #00bcd4;
margin-top: 0px;
}
.nav_top ul li{
text-decoration: none;
list-style: none;
float: left;
font-size: 16px;
padding-left: 31px;
padding-right: 31px;
line-height: 50px;
font-family: "微软雅黑";
}
.nav_top ul li:hover,.current{
background: white;
color: #00bcd4;
}
.nav_content{
font-size: 25px;
font-weight: bold;
font-family: "微软雅黑";
}
.nav_content span{
position: absolute;
bottom:60%;
left: 48%;
}

</style>

window.onload = function(){

//不支持getElementByClassName的浏览器可以通过querySelector来获得，通过querySelectorAll可以获得所有符合条件的className的数组

var top = document.querySelector('.nav_top');
var content = document.querySelectorAll(".nav_content");

content[0].style.display = "block"; //默认为第一个内容显示
for (var i = 1; i < content.length; i++) {//初始化所有的内容区，除了第一个，使其他的不显示
content[i].style.display = "none";，
};
var li = top.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onclick = function(){
var num = this.index;
//消除冲突的样式
for (var j = 0; j < content.length; j++) {
li[j].className = "";
content[j].style.display = "none";

}

li[num].className = "current";
content[num].style.display = "block";
}
}
}
</script>

</head>
<body>
<div class = "nav_body">
<div class = "nav_top">
<ul>
<li class = "current">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
<li>选项卡5</li>
</ul>
</div>
<div class = "nav_content">
<span>111</span>
</div>
<div class = "nav_content">
<span>222</span>
</div>
<div class = "nav_content">
<span>333</span>
</div>
<div class = "nav_content">
<span>444</span>
</div>
<div class = "nav_content">
<span>555</span>
</div>
</div>
</div>
</body>
</html>

0 0

案例二 、自定义选项卡

案例二、自定义选项卡