您的位置：首页 > Web前端 > JavaScript

javascript 实现tab选项卡

2014-11-25 13:33 239 查看

<!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 html

相关文章推荐

新的分享

章节导航