JQuery實現的簡單標籤選項卡效果
阿新 • • 發佈：2019-02-13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery實現的標籤選項卡效果</title> <style type="text/css"> ul,li { list-style:none; padding:0; margin:0; } li { float:left; background-color:Silver; color:White; padding:5px; margin-left:5px; border:1px solid White; } div { clear:left; background-color:Gray; color:White; width:240px; height:100px; padding:3px; display:none; } .content { display:block; } .tab { background-color:Gray; border:1px solid Gray; } </style> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var timeout;//延時全域性變數 $(function () { //遍歷選項卡 $('li').each(function (index) { $(this).mouseover(function () { //滑鼠劃入 var linode = $(this); timeout = setTimeout(function () { //設定延時，防止滑鼠無意移動照成的顯示錯誤 $('.content').removeClass("content"); //將原來顯示的區域進行隱藏 $('.tab').removeClass("tab"); //移除選項卡的特效 $(linode).addClass("tab"); //給滑鼠劃入的選項卡新增tab $('div').eq(index).addClass("content"); //顯示劃入標籤下的內容 }, 300);//設定300毫秒的滑鼠劃入顯示延遲 }).mouseout(function () { clearTimeout(timeout);//當滑鼠離開時清楚延時 }); }); }); </script> </head> <body> <h3>jQuery實現的簡單標籤選項卡效果</h3> <h4>當滑鼠滑向任一選項卡,顯示當前選項卡，隱藏其他選項卡</h4> <h4>設定簡單的選項卡高亮效果,當滑鼠隨意快速劃入時不顯示當前選項卡內容,停留300毫秒才顯示</h4> <ul> <li class="tab">選項卡1</li> <li>選項卡2</li> <li>選項卡3</li> </ul> <div class="content">選項卡1的內容</div> <div>選項卡2的內容</div> <div>選項卡3的內容</div> </body> </html>