$(function(){
$(".sel span").mouseover(function(){
$(this).addClass("bg").siblings().removeClass();
var index=$(this).index();
$(".list ul").eq(index).show().siblings().hide();
});});
- mousemove事件通过鼠标在元素上移动来触发。
- 行内元素(span)代码尽量写在一行上,不写在一行上(换行)会有空格
(这两个块之间会有空格)
源代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>精美选项卡特效</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#product{
width:862px;
height:250px;
margin:100px auto 0px;
}
#product .title{
height:30px;
border-bottom:solid 1px #000;
}
#product .title .txt{
width:170px;
height:30px;
float:left;
font-size:14px;
line-height:30px;
}
#product .title .sel{
width:364px;
height:30px;
float:right;
}
#product .title .sel span{
width:120px;
height:29px;
border:solid 1px #ddd;
display:block;
font-size:12px;
line-height:29px;
text-align:center;
border-right:0px;
border-bottom:0px;
float:left;
}
#product .list{
height:220px;
}
#product .list ul li{
width:214px;
height:215px;
border:solid 1px #ddd;
list-style:none;
float:left;
text-align:center;
border-top:0px;
border-right:0px;
}
#product .list ul li.last{
border-right:1px solid #ddd;
width:213px;
}
#product .list ul li p{
font-size:12px;
line-height:20px;
}
#product .list ul li img{
margin-bottom:20px;
}
#product .list ul{
display:none;
}
.bg{
cursor:pointer;
background:pink;
}
</style>
<div id="Product">
<div class="title">
<div class="txt">专属于你的包橱</div>
<div class="sel">
<span class="active">发现喜欢</span><span >正在促销</span><span class="last">最近浏览</span>
</div>
</div>
<div class="List">
<ul style="display:block;">
<li> <img src="images/1.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li> <img src="images/2.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li> <img src="images/3.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li class="last">
<img src="images/4.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
</ul>
<ul>
<li> <img src="images/5.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li> <img src="images/6.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li> <img src="images/7.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li class="last">
<img src="images/8.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
</ul>
<ul>
<li> <img src="images/9.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li> <img src="images/10.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li> <img src="images/11.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
<li class="last">
<img src="images/1.jpg" width="127" height="127"/>
<p>麦包包(M Plus) 手提单肩斜挎包</p>
<p><b>¥148</b> <del>¥338</del></p>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" >
$(".sel span").mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
var _index=$(this).index();
$(".List ul").eq(_index).show().siblings().hide();
});
</script>