可以..吗
用像二级菜单那样做可以不?
qq_慕UI9367020
2016-06-09
2 回答
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
*{ font-family: "微软雅黑";}
body{
min-width: 1300px;}
.q1{
position: relative;width: 300px;margin: 0px auto;}
.w1{
position: absolute;z-index: 1;left: -30px;}
.e1{
display: inline-block;width: 50px;text-align: center;padding: 6px 10px;list-style: none;border: 1px solid #000;border-bottom: 0px;}
.e2{
border-top: 3px solid #C30;border-bottom: 3px solid #FFF;}
.w2{
position: relative;top: 52px;border: 1px solid #000;border-top: 3px solid #C30;}
.w2 ul{
position: relative;left: -20px;font-size: 14px;line-height: 25px;list-style: none;}
.r1{
display:none;}
.r2{
display:block;}
</style>
<script type="text/javascript">
function ta(y1) {
var d1=document.getElementsByClassName("e1");
var d2=document.getElementsByClassName("e2")[0];
var f1=document.getElementsByClassName("r1");
var f2=document.getElementsByClassName("r2")[0];
for(var i=0;i<=d1.length;i++){
if(d1[i]==y1){
d2.setAttribute("class","e1");
d1[i].setAttribute("class","e1 e2");
f2.setAttribute("class","r1");
f1[i].setAttribute("class","r2");
}
}
}
</script>
</head>
<body>
<div class="q1">
<div class="w1">
<ul>
<li class="e1 e2" onmouseover="ta(this)">房产</li>
<li class="e1" onmouseover="ta(this)">家居</li>
<li class="e1" onmouseover="ta(this)">二手房</li>
</ul>
</div>
<div class="w2">
<ul class="r2">
<li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
<ul class="r1">
<li>40平出租屋大改造 美少女的混搭小窝</li>
<li>经典清新简欧爱家 90平老房焕发新生</li>
<li>新中式的酷色温情 66平撞色活泼家居</li>
<li>瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
<ul class="r1">
<li>通州豪华3居260万 二环稀缺2居250w甩</li>
<li>西3环通透2居290万 130万2居限量抢购</li>
<li>黄城根小学学区仅260万 121平70万抛!</li>
<li>独家别墅280万 苏州桥2居优惠价248万</li>
</ul>
</div>
</div>
</body>
</html>举报
0/150
提交
取消
