jquery實現有過渡效果的tab切換
阿新 • • 發佈:2020-07-19
本文例項為大家分享了jquery實現tab切換的具體程式碼,供大家參考,具體內容如下
效果:
程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li { list-style: none; margin: 0; padding: 0; } .tabBox { width: 400px; height: 200px; border: 1px solid pink; } .ul1 { height: 40px; border-bottom: 1px solid pink; } .ul1 li { width: 25%; line-height: 40px; text-align: center; float: left; cursor: pointer; } .ul1 li.active { background-color: pink; transition: all 0.6s ease-in-out; /* 標題過渡效果 */ } .ul2 { overflow: hidden; } .ul2 li { display: none; } .ul2 li.selected { display: block; } </style> </head> <body> <div class="tabBox"> <ul class="ul1"> <li class="active">標題1</li> <li>標題2</li> <li>標題3</li> <li>標題4</li> </ul> <ul class="ul2"> <li class="selected">內容內容1</li> <li>內容2內容2</li> <li>內容3內容3</li> <li>內容4內容4</li> </ul> </div> <script type="text/javascript" src="jquery-2.1.1.js"></script> <script> $(function(){ $(".ul1>li").mouseover(function(){ $(this).addClass("active").siblings("li").removeClass("active"); var index = $(this).index(); $(".ul2>li:eq("+index+")").fadeIn(1000).siblings("li").hide(); }) }) </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。