原文:jquery简单的tab切换特效插件jquery-tab demo代码下载
源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm
<!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></title> <script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> <style type="text/css"> .tab { background-color: #FAFAFA; margin: 5px 8px; padding: 5px 10px; } .tab p span { background-color: #EFEFEF; border: 1px solid #CCCCCC; cursor: pointer; margin-right: 6px; padding: 2px 5px; } .tab p span.current { background-color: #FAFAFA; border-bottom-color: #fafafa; } .tab p { border-bottom: 1px solid #CCCCCC; font-weight: bold; padding: 0 10px 2px; } .tab li { border-bottom: 1px dotted #CCCCCC; padding-bottom: 3px; margin: 5px 0; } .tab .mhot,.tab.allhot { display: none; } </style> <script type="text/javascript"> $(document).ready(function() { $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式 $(".tab ul:not(:first)").hide(); //隐藏其它的UL $(".tab span").mouseover(function() { $(".tab span").removeClass("current"); //去掉所有SPAN的样式 $(this).addClass("current"); $(".tab ul").hide(); $("." + $(this).attr("id")).fadeIn('slow'); }); }); </script> </head> <body> <div class="tab"> <p> <span id="tab1">tab1</span> <span id="tab2">tab2</span> <span id="tab3">tab3</span> </p> <ul class="tab1"> <li>最代码</li> <li>http://www.zuidaima.com</li> <li>我和我</li> </ul> <ul class="tab2"> <li>一花一世办</li> <li>一草一天堂</li> </ul> <ul class="tab3"> <li>一草一天堂</li> <li>我和我的祖国</li> <li>最爱的地方</li> </ul> </div> </body> </html>
时间: 2024-10-08 21:13:55