<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab选项卡</title>
<style>
*{
padding: 0px;
margin: 0px;
font-family: microsoft yahei;
font-size: 14px;
}
#tab{
width: 333px;
height: 300px;
position:absolute;
top: 100px;
left: 100px;
}
/*选项卡标签样式*/
.tab_tit{
width: 80px;
height: 25px;
line-height: 25px;
border-radius: 4px 4px 0px 0px;
background: #f60;
color: #fff;
text-align: center;
display: inline-block;
}
.tab_tit:hover{
background: #090;
}
.active{
background: #090;
}
.tab_con{
height: 100%;
padding: 10px;
border: 1px solid #999;
border-radius: 0px 0px 4px 4px;
display: none;
}
.visiable{
display: block;
}
</style>
<script type="text/javascript">
/**
* 切换选项卡
* @return {[type]} [description]
*/
function switch_tab()
{
var tits = document.getElementsByClassName("tab_tit");
var cons = document.getElementsByClassName("tab_con");
for (var i = 0; i < tits.length; i++) {
tits[i].index = i ;
tits[i].onclick = function () {
for (var i = 0; i < tits.length; i++) {
tits[i].className="tab_tit";
};
this.className +=" active";
//切换选项卡对应的content
for (var i = 0; i < cons.length; i++) {
cons[i].className = "tab_con";
};
//根据tab的index属性来操作对应的tab标签
cons[this.index].className += " visiable";
}
}
}
//当window加载完成操作
window.onload = function(){
switch_tab();
}
</script>
</head>
<body>
<div id="tab">
<div class="tab_tit">标签1</div>
<div class="tab_tit">标签2</div>
<div class="tab_tit">标签3</div>
<div class="tab_tit">标签4</div>
<div class="tab_con visiable">内容1</div>
<div class="tab_con">内容2</div>
<div class="tab_con">内容3</div>
<div class="tab_con">内容4</div>
</div>
</body>
</html>
javascript实现的tab选项卡切换
最新推荐文章于 2024-09-09 09:35:48 发布