Excel自動填充123456不成功的原因分析
1184
2023-11-15
本文實例講述了jQuery實現平滑滾動的標簽分欄切換效果。分享給大家供大家參考。具體如下：
運行代碼如下
具體代碼如下
<html>
<head>
<title>jQuery平滑滾動的標簽分欄切換</title>
<meta charset="gb2312">
<style>
ul,li{
margin:0px;
padding:0px;
list-style:none
}
li{
float:left;
background-color:#8c6239;
color:white;
padding:5px;
margin-right:2px;
border:1px solid white;
}
li.myLi{
background-color:#ea5500;
border:1px solid #ea5500;
}
div{
clear:left;
background-color:#ea5500;
color:white;
width:300px;
height:100px;
padding:10px;
display:none;
}
div.myDiv{
display:block;
}
</style>
<script src="http://www.gimoo.net/t/1904/jquery-1.7.1.min.js"></script>
<script>
var timeId;
$(document).ready(function(){
$("li").each(function(index){
//index是li數組的的索引值
$(this).mouseover(function(){
var liNode = $(this);
//延遲是為了減少服務器壓力，防止鼠標快速滑動
timeId = setTimeout(function(){
//將原來顯示的div隱藏掉
$("div.myDiv").removeClass("myDiv");
//將原來的li的myLi去掉
$("li.myLi").removeClass("myLi");
//顯示當前鼠標li的對應的div
$("div").eq(index).addClass("myDiv");
//增加當前li的myLi
liNode.addClass("myLi");
},300);
}).mouseout(function(){
clearTimeout(timeId);
});
});
});
</script>
</head>
<body>
<ul>
<li class="myLi">this is li 1</li>
<li>this is li 2</li>
<li>this is li 3</li>
</ul>
<div class="myDiv">this is div1</div>
<div>this is div2</div>
<div>this is div3</div>
</body>
</html>
希望本文所述對大家的jquery程序設計有所幫助。
