html小例子
阿新 • • 發佈:2018-12-23
- 精美選項卡效果:
關鍵程式碼:
$(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 >
<!-- 引用 css樣式 高:300m; 寬:400m; px畫素-->
<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>
<!--引用外部的 jquery 類庫檔案 -->
<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"); //class="active"
var _index=$(this).index(); //獲取序列號
$(".List ul").eq(_index).show().siblings().hide();
});
</script>