js选项卡
Posted 冰域
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js选项卡相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul,li{margin:0;padding: 0;}
li{list-style-type: none}
.on{width: 350px;height: 62px;border-bottom: 2px solid #8B4513;}
.on li{float: left;height: 60px;line-height: 60px;margin-left: 10px;border: 1px solid #999;border-bottom: none;}
.on li:hover{cursor: pointer}
.on li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
.box{width: 350px;clear: both;border: 1px solid #ccc;border-top: none;}
.show{display: block}
.hide{display: none}
</style>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<ul class="on" id="change">
<li class="active" id="home">home</li>
<li id="family">family</li>
<li id="ershoufang">ershoufang</li>
</ul>
<ul class="box show" id="one">
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
<ul class="box hide" id="two">
<li>40平出租屋大改造 美少女的混搭小窝</li>
<li>经典清新简欧爱家 90平老房焕发新生</li>
<li>新中式的酷色温情 66平撞色活泼家居</li>
<li>瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
<ul class="box hide" id="three">
<li>通州豪华3居260万 二环稀缺2居250w甩</li>
<li>西3环通透2居290万 130万2居限量抢购</li>
<li>黄城根小学学区仅260万 121平70万抛!</li>
<li>独家别墅280万 苏州桥2居优惠价248万</li>
</ul>
<script type="text/javascript">
var ul1 = document.getElementById(‘change‘);
var lic = ul1.getElementsByTagName(‘li‘);
var ul2 = document.getElementsByClassName(‘box‘);
for(var i = 0; i < lic.length ; i++) {
lic[i].index = i;
lic[i].onmouseover = function() {
for(var i = 0; i < lic.length; i++) {
lic[i].className = ‘‘;
}
this.className = "active";
for(var j = 0; j < ul2.length; j++){
ul2[j].className="hide";
}
alert(this.index);
ul2[this.index].className = "show";
}
}
</script>
</body>
</html>
window.onload = function(){}是当页面所有元素都加载完后，包括文件才触发，文件资源 不好时会有延迟．通常希望ＤＯＭ元素初始化完成时就执行操作，用$(document).ready(function(){}) 方法．
以上是关于js选项卡的主要内容，如果未能解决你的问题，请参考以下文章