js实现tab切换

来源：互联网发布：lr下载mac 破解版编辑：程序博客网时间：2024/05/29 18:42
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}.box{width: 600px;height: 600px;margin: 0 auto;}ul{clear: both;list-style: none;}.tab-title{position: relative;float: left;width: 80px;height: 40px;line-height: 40px;text-align: center;z-index: 999;border: 1px solid rosybrown;}.active{border-bottom: 1px solid #fff;color: burlywood;}.tab-content{position: relative;width: 600px;height: 500px;clear: both;top: -1px;border: 1px solid rosybrown;}</style></head><body><div class="box"><ul><li class="tab-title active">tab1</li><li class="tab-title">tab2</li><li class="tab-title">tab3</li></ul><div class="tab-content">content1</div><div class="tab-content">content2</div><div class="tab-content">content3</div></div><div class="box"><ul><li class="tab-title active">tab1</li><li class="tab-title">tab2</li><li class="tab-title">tab3</li><li class="tab-title">tab4</li><li class="tab-title">tab5</li></ul><div class="tab-content">content1</div><div class="tab-content">content2</div><div class="tab-content">content3</div><div class="tab-content">content4</div><div class="tab-content">content5</div></div></body><script type="text/javascript">var boxs = document.getElementsByClassName("box");var box = boxs[0];var box2 = boxs[1];var uls = document.getElementsByTagName("ul");var ul = uls[0];var ul2 = uls[1];var titles = ul.getElementsByTagName("li");var title2s = ul2.getElementsByTagName("li");var contents = box.getElementsByClassName("tab-content");var content2s = box2.getElementsByClassName("tab-content");//3个tabsetStyle(contents)tabChooice(titles,contents);//5个tabsetStyle(content2s);tabChooice(title2s,content2s);//设置除了第一个content外，其余的display都设置为nonefunction setStyle(cons){for (var i = 1; i < cons.length; i++) {cons[i].style.display = "none";}}//设置tab切换function tabChooice(elems,cons){var activeNum = 0;for (var i = 0; i < elems.length; i++) {!function (i){elems[i].onclick = function (){elems[activeNum].className = "tab-title";cons[activeNum].style.display = "none";elems[i].className = "tab-title active";cons[i].style.display = "block";activeNum = i;}}(i);}}</script></html>
阅读全文
0 0