标签：选项卡 aTab js 1px div border css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/text.css">
<link rel="stylesheet" href="./css/tab.css">
<title>Document</title>
</head>
<body>
<div class="box">
<ul>
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div>选项卡1内容</div>
<div class="hide">选项卡2内容</div>
<div class="hide">选项卡3内容</div>
</div>
</body>
<script src="./js/tab.js"></script>
</html>
js
window.onload = function () { /*window的加载事件处理*/
var aTab = document.getElementsByTagName("li") /*使用标签名li获取所有选项卡*/
var content = document.getElementsByClassName("box")[0]; /*使用类名获取最外层的div*/
var aDiv = content.getElementsByTagName("div"); /*使用父div（最外层div）对象及标签名div获取所有内容div*/
var len = aTab.length; /*获取选项卡个数*/
for (var i = 0; i < len; i++) { /*循环遍历选项卡，并处理每个选项卡的onmouseover事件*/
aTab[i].index = i; /*index是自定义属性，并且属性值等于循环变量值*/
aTab[i].onmouseover = function () { /*选项卡的鼠标指针移入事件处理*/
for (i = 0; i < len; i++) {
aTab[i].className = ''; /*取消每个选项卡的类名*/
aDiv[i].className = 'hide'; /*设置每个内容div的类名为hide，隐藏所有内容div*/
}
aTab[this.index].className = 'act'; /*设置当前选项卡的类名为act，使之作为选中选项卡*/
aDiv[this.index].className = ''; /*取消当前选项卡对应内容div的类名，使之显示*/
};
}
};
css-tab.css
.box{
width: 350px;
margin: 20px auto;
}
.box ul{
margin: 0;
padding: 0;
height: 25px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
list-style: none;
}
.box ul li{
float: left;
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
background-color: #f5f5f5;
cursor: pointer;
}
css-text.css
.hide {
display: none;
}
body,
html {
font-family: '微软雅黑';
font-size: 12px;
line-height: 18px;
}
.box div{
padding: 20px;
height: 160px;
border: 1px solid #ccc;
border-top: 0px;
}
标签：选项卡,
aTab,
js,
1px,
div,
border,
css
From： https://www.cnblogs.com/mikizero/p/17920577.html