简单的javasrcipt选项卡

时间:2021-08-12 18:09:41
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta charset="gb2312">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="main.js"></script>
<title>Document</title>
</head>

<body>
<div class="top">
<ul class="clear" id="btn_one">
<li class="light" data-color="red">one</li>
<li data-color="blue">two</li>
<li data-color="yellow">three</li>
</ul>
</div>
<div class="main" id="amain">
<div class="min main1">
<ul>
<li>这里有座山</li>
<li>这里有座山</li>
<li>这里有座山</li>
<li>这里有座山</li>
<li>这里有座山</li>
</ul>
</div>
<div class="min main2" style="display: none">
<ul>
<li>窗外有风景</li>
<li>窗外有风景</li>
<li>窗外有风景</li>
<li>窗外有风景</li>
<li>窗外有风景</li>
</ul>
</div>
<div class="min main3" style="display: none">
<ul>
<li>天上有太阳</li>
<li>天上有太阳</li>
<li>天上有太阳</li>
<li>天上有太阳</li>
<li>天上有太阳</li>
</ul>
</div>
</div>
</body>

</html>

上面是html代码,很简单就是一个选项卡内容

* {
margin: 0;
padding: 0;
font-size: 14px;
}
/*这里关键了,在float下一样可以获取width和height的值*/
.clear {
zoom: 1;
}

.clear:after {
content: '';
display: block;
clear: both;
}

.top ul {
list-style-type: none;
}

.top ul li {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
background-color: powderblue;
color: pink;
border: 2px solid powderblue;
}

.top ul li.light {
border: 2px solid red;
color: red;
}

.main {
width: 612px;
height: 300px;
position: relative;
background: red;
}

.min {
width: 612px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}

.min ul li {
height: 30px;
line-height: 30px;
font-size: 20px;
}

上面是CSS样式,很简单;用light样式来高亮li初始

// 通过ID  封装函数,如果id字符串等于string,返回getElementById(id)
//
否则返回id 本身;


function $(id) {
return typeof id == "string" ? document.getElementById(id) : id;
}
window.onload
= function() {
//定义函数titles(li的集合)divs(div的集合);
var titles = $("btn_one").getElementsByTagName("li");
var divs = $("amain").getElementsByTagName("div");

//当titles和divs的长度不一样就不执行;
if (titles.length != divs.length) {
return;
}
for (var i = 0; i < titles.length; i++) {
//为btn_on下的每个li添加索引;
titles[i].id = i;
     //滑动鼠标onmouseover时触发事件; titles[i].onmouseover
= function() {
//getAttribute可以取得自定义标签data-color的值;
var btnstyle = this.getAttribute("data-color");
//清楚所有li和div上的样式
clearBtn();
//鼠标滑过哪个li就高亮哪个li;
this.className = "light";
//data-color当下的值给当前次数的li的内容
this.style.color = btnstyle;
//把data-color当下的值给当前次数li的边框
this.style.border = '2px solid ' + btnstyle;
//设置当前li所对应的div为显示状态
divs[this.id].style.display = "block";

}
}

function clearBtn() {
for (var i = 0; i < titles.length; i++) {
//li的样式为空
titles[i].className = "";
//li的内容为白色
titles[i].style.color = "";
//li的边框为空
titles[i].style.border = "";
//div为隐藏状态
divs[i].style.display = "none";
}
}
}

就是通过索引来连接上下两个div,直接可以通过titles和divs两个函数进行响应