dchengquan
2013-01-28 12:37:00
jquery简单的tab切换特效插件jquery-tab demo代码下载
<!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>www.zuidaima.com</li> <li>我和我</li> </ul> <ul class="tab2"> <li>一花一世办</li> <li>一草一天堂</li> </ul> <ul class="tab3"> <li>阿里巴巴</li> <li>阿里巴巴</li> <li>一草一天堂</li> <li>我和我的祖国</li> <li>最爱的地方</li> </ul> </div> </body> </html>
由最代码官方编辑于2014-11-2 9:49:06
猜你喜欢
请下载代码后再发表评论
相关代码
最近下载
无心的叶子 LV1
2020年5月11日
ftc1314 LV12
2018年7月6日
凉城冷巷樱花泪 LV6
2018年6月8日
simoncao LV1
2017年8月19日
韦文灵 LV5
2016年8月2日
j375149869 LV1
2016年5月16日
肖佳佳 LV1
2016年2月27日
dagf113225 LV68
2016年2月25日
最代码-ian LV26
2016年1月26日
匡兴(秀泽) LV28
2015年6月30日
最近浏览
sunjianping LV11
2023年5月14日
三水hhhh
2023年3月20日
暂无贡献等级
CXZ1340465398 LV1
2022年11月10日
cqbscxh LV11
2022年9月30日
Michelle1106 LV5
2021年3月8日
852067175 LV1
2020年7月7日
无心的叶子 LV1
2020年5月11日
风起人散 人走茶凉 LV1
2020年4月3日
rayson LV2
2019年9月9日
Java基础入门 LV12
2019年7月3日