本文實例為大家分享jQuery實現TAB選項卡切換特效，供大家參考，具體內容如下
1、tab切換 on
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery tab切換</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin-left: 50px; margin-top: 50px; } /*清浮動---clearfix*/ .clearfix { *zoom: 1; } .clearfix:after { content: ""; clear: both; display: block; height: 0; font-size: 0; visibility: hidden; } .blist { border:1px solid #d9d9d9; width: 275px; height: 32px; } .blist li:first-child{ border-left: none; } .blist li{ list-style: none; width: 68px; height: 32px; border-left:1px solid #d9d9d9; font-size: 14px; font-family: "楷體"; line-height: 32px; text-align: center; float: left; /*鼠標樣式改變為一個手*/ cursor: pointer; /*字體免選中*/ -webkit-user-select: none; } .blsit-list{ width: 275px; } .blsit-list li{ list-style: none; width: 275px; border:1px solid #ccc; height: 200px; border-top: none; } .wrap .blist li.active{ font-weight: bold; color: red; border-top: 2px solid red; position: relative; top:-1px; height: 31px; } .blsit-list li:first-child{ display: block; } .blsit-list li{ display: none; } </style></head><body> <div class="wrap"> <ul class="blist clearfix"> <li class="active">電影</li> <li>電腦</li> <li>冰箱</li> <li>空調</li> </ul> <ul class="blsit-list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <div class="wrap"> <ul class="blist clearfix"> <li class="active">電影</li> <li>電腦</li> <li>冰箱</li> <li>空調</li> </ul> <ul class="blsit-list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <div class="wrap"> <ul class="blist clearfix"> <li class="active">電影</li> <li>電腦</li> <li>冰箱</li> <li>空調</li> </ul> <ul class="blsit-list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <div class="wrap"> <ul class="blist clearfix"> <li class="active">電影</li> <li>電腦</li> <li>冰箱</li> <li>空調</li> </ul> <ul class="blsit-list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ $(".blist").on("click","li",function(){ // 設index為當前點擊 var index = $(this).index(); // 點擊添加樣式利用siblings清除其他兄弟節點樣式 $(this).addClass("active").siblings().removeClass("active"); // 同理顯示與隱藏 $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide(); }) }) </script></body></html>2、tab切換 mouseenter
效果圖：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery tab切換</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin-left: 50px; margin-top: 50px; } /*清浮動---clearfix*/ .clearfix { *zoom: 1; } .clearfix:after { content: ""; clear: both; display: block; height: 0; font-size: 0; visibility: hidden; } .blist { border:1px solid #d9d9d9; width: 275px; height: 32px; } .blist li:first-child{ border-left: none; } .blist li{ list-style: none; width: 68px; height: 32px; border-left:1px solid #d9d9d9; font-size: 14px; font-family: "楷體"; line-height: 32px; text-align: center; float: left; /*鼠標樣式改變為一個手*/ cursor: pointer; /*字體免選中*/ -webkit-user-select: none; } .blsit-list{ width: 275px; } .blsit-list li{ list-style: none; width: 275px; border:1px solid #ccc; height: 200px; border-top: none; } .wrap .blist li.active{ font-weight: bold; color: red; border-top: 2px solid red; position: relative; top:-1px; height: 31px; } .blsit-list li:first-child{ display: block; } .blsit-list li{ display: none; } </style></head><body> <div class="wrap"> <ul class="blist clearfix"> <li class="active">電影</li> <li>電腦</li> <li>冰箱</li> <li>空調</li> </ul> <ul class="blsit-list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <div class="wrap"> <ul class="blist clearfix"> <li class="active">電影</li> <li>電腦</li> <li>冰箱</li> <li>空調</li> </ul> <ul class="blsit-list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <div class="wrap"> <ul class="blist clearfix"> <li class="active">電影</li> <li>電腦</li> <li>冰箱</li> <li>空調</li> </ul> <ul class="blsit-list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <div class="wrap"> <ul class="blist clearfix"> <li class="active">電影</li> <li>電腦</li> <li>冰箱</li> <li>空調</li> </ul> <ul class="blsit-list"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ $(".blist li").on("mouseenter",function(){ var index = $(this).index(); $(this).addClass("active").siblings().removeClass("active"); $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide(); }) }) </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
