jQuery+CSS實作標籤分欄切換（附程式碼）

這次帶給大家jQuery CSS實作標籤分欄切換（附程式碼），jQuery CSS實作標籤分欄切換的注意事項有哪些，以下就是實戰案例，一起來看一下。

運行程式碼如下

#具體程式碼如下

 
 <title>jQuery平滑滚动的标签分栏切换</title>
 <meta>
 <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;
 }
 p{
 clear:left;
 background-color:#ea5500;
 color:white;
 width:300px;
 height:100px;
 padding:10px;
 display:none;
 }
 p.myp{
 display:block;
 }
 </style>
 <script></script>
 <script>
 var timeId;
 $(document).ready(function(){
 $("li").each(function(index){
 //index是li数组的的索引值
 $(this).mouseover(function(){
 var liNode = $(this);
 //延迟是为了减少服务器压力，防止鼠标快速滑动
 timeId = setTimeout(function(){
  //将原来显示的p隐藏掉
  $("p.myp").removeClass("myp");
  //将原来的li的myLi去掉
  $("li.myLi").removeClass("myLi");
  //显示当前鼠标li的对应的p
  $("p").eq(index).addClass("myp");
  //增加当前li的myLi
  liNode.addClass("myLi");
 },300);
 }).mouseout(function(){
 clearTimeout(timeId);
 });
 });
 });
 </script>
 
 
 

 
• this is li 1
 
• this is li 2
 
• this is li 3
 

 

this is p1

 

this is p2

 

this is p3

 

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jquery實作元素拖曳排序（附程式碼）

##jQuery Ajax實作表格資料標題排序
#

以上是jQuery+CSS實作標籤分欄切換（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！