用html编写标签切换效果,标签栏切换效果.html

标签栏切换效果

body,ul{margin:0;padding:0;}

ul{list-style:none;}

.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}

.tab-head{height:31px;}

.tab-head-div{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text-align:center;cursor:pointer;color:#fff;}

.tab-head .current{background:chartreuse;border-bottom:1px solid aqua;color:#000;}

.tab-head-r{border-right:0;}

.tab-body-div{display:none;margin:20px 10px;}

.tab-body .current{display:block;}

标签一

标签二

标签三

标签四

1

2

3

4

var tabs = document.getElementsByClassName('tab-head-div');

var divs = document.getElementsByClassName('tab-body-div');

for (var i = 0; i < tabs.length; ++i) {

tabs[i].onmouseover = function() {

for (var i = 0; i < divs.length; ++i) {

if (tabs[i] == this) {

divs[i].classList.add('current');

tabs[i].classList.add('current');

} else {

divs[i].classList.remove('current');

tabs[i].classList.remove('current');

}

}

};

}

返回首页

一键复制

编辑

Web IDE

原始数据

按行查看

历史