这一个 例子 用jquery怎么写？
Cassie0
2015-11-10 09:19
我想用jquery改写 但是对jquery不太了解 希望大神帮忙
1回答
-
- 十nian
- 2015-11-15 23:34:29
jq主要也是获取当前值得索引而已，代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* CSS样式制作 */
*{margin:0px;padding:0px;}
ul{list-style:none;}
a{text-decoration:none}
#tab{margin-top:10px;}
li{height:30px;width:102px;border:1px green solid;line-height:30px;text-align:center;float:left;border-bottom:2px red solid;}
li.active{border-bottom:none;border-top:2px red solid;background-color:white;}
#content{width:300px;padding:5px;line-height:20px;;border:1px green solid;border-top:none;clear:both;}
.hide{display:none;}
.show{display:block;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
var _tab=$("#tab");//选项卡
var _tab_li=_tab.find("li");
var _content=$("#content");//选项卡内容
var _content_li=_content.find("div");
_tab_li.on("mouseover",function(){
var index=$(this).index();//获取索引
_tab_li.removeClass("active");//所有选项卡删除没有下边框的class
_content_li.css({"display":"none"});//把所有内容先隐藏
_tab_li.eq(index).addClass("active");//当前选项卡添加没有下边框的class；
_content_li.eq(index).css({"display":"block"});//把当前选项卡对应的内容显示
})
})
</script>
</head>
<body>
<div>
<div id="tab">
<ul >
<li class="active"><a href="">房产</a></li>
<li><a href="">家居</a></li>
<li><a href="">二手房</a></li>
</ul>
</div>
<div id="content">
<div class="show">
<p>275万购昌平邻铁三居 总价20万买一居</p>
<p>200万内购五环三居 140万安家东三环</p>
<p>北京首现零首付楼盘 53万购东5环50平</p>
<p> 京楼盘直降5000 中信府 公园楼王现房</p>
</div>
<div class="hide">
<p>40平出租屋大改造 美少女的混搭小窝</p>
<p>经典清新简欧爱家 90平老房焕发新生</p>
<p>新中式的酷色温情 66平撞色活泼家居</p>
<p>瓷砖就像选好老婆 卫生间烟道的设计</p>
</div>
<div class="hide">
<p>通州豪华3居260万 二环稀缺2居250w甩</p>
<p>西3环通透2居290万 130万2居限量抢购</p>
<p>黄城根小学学区仅260万 121平70万抛!</p>
<p>独家别墅280万 苏州桥2居优惠价248万</p>
</div>
</div>
</div>
</body>
</html>
JavaScript进阶篇
468195 学习 · 21891 问题
相似问题