欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果

 更新時(shí)間：2015年12月17日 11:30:20   投稿：lijiao  
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果，具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)平滑滾動(dòng)的標(biāo)簽分欄切換效果。分享給大家供大家參考。具體如下：

運(yùn)行代碼如下

具體代碼如下

<html>
 <head>
 <title>jQuery平滑滾動(dòng)的標(biāo)簽分欄切換</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="./jquery-1.7.1.min.js"></script>
 <script>
 var timeId;
 $(document).ready(function(){
 $("li").each(function(index){
 //index是li數(shù)組的的索引值
 $(this).mouseover(function(){
 var liNode = $(this);
 //延遲是為了減少服務(wù)器壓力，防止鼠標(biāo)快速滑動(dòng)
 timeId = setTimeout(function(){
  //將原來(lái)顯示的div隱藏掉
  $("div.myDiv").removeClass("myDiv");
  //將原來(lái)的li的myLi去掉
  $("li.myLi").removeClass("myLi");
  //顯示當(dāng)前鼠標(biāo)li的對(duì)應(yīng)的div
  $("div").eq(index).addClass("myDiv");
  //增加當(dāng)前l(fā)i的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>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論