-
-11 14
-
js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码:
XML/HTML代码- <style>
- .txtadsblk01{ width:200px;}
- .txtadsblk01 ul{ padding:0; margin:0;}
- .txtadsblk01 li{ float:left; list-style:none; margin-left:3px; border:1px solid #ccc; padding:0 12px;}
- .xuanxiangkadiv{ width:180px; margin:0 0; margin-top:12px; border:1px solid #CCC; padding:6px;}
- .hide{ display:none;}
- .block{ display:block;}
- .now{ border:1px solid #333 !important;}
- </style>
- <div class="txtadsblk01">
- <ul id="txtblk01menu">
- <li class="now"><a target="_blank" href="http://edu.sina.com.cn/">教育</a></li>
- <li class=""><a target="_blank" href="http://edu.sina.com.cn/">培训</a></li>
- <li class=""><a target="_blank" href="http://edu.sina.com.cn/">招生</a></li>
- <div style=" clear:both;"></div>
- </ul>
- <div class="xuanxiangkadiv">
- 这是选项卡1111的内容
- 这是选项卡1111的内容 这是选项卡1111的内容 这是选项卡1111的内容 这是选项卡1111的内容 这是选项卡1111的内容 这是选项卡1111的内容 这是选项卡1111的内容
- </div>
- <div class="xuanxiangkadiv hide">
- 这是选项卡2222的内容 这是选项卡2222的内容 2222的内容 2222的内容 2222的内容 2222的内容 2222的内容
- </div>
- <div class="xuanxiangkadiv hide">
- 这是选项333卡3的内容
- </div>
- </div>
- <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".txtadsblk01 li").mouseover(function(){
- $('.txtadsblk01 li').removeClass("now");
- $(this).addClass("now");
- var likey = $(".txtadsblk01 li").index(this);
- $('.xuanxiangkadiv').addClass("hide").removeClass("block");
- $(".xuanxiangkadiv:eq("+likey+")").addClass("block").removeClass("hide");
- });
- })
- </script>
预览地址:http://www.phplover.cn/demo/jsxuanxiangka/demo.html
效果预览预览就知道啦。欢迎下载copy,当然也欢迎反馈不足和问题。
推荐阅读:php文件怎么打开
本文来源于php爱好者:php教程 —http://www.phplover.cn/
原文地址:http://www.phplover.cn/post/442.html
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
8楼 无锡平面设计培训
Post:2012-4-13 9:30:48
7楼 影楼网络营销
Post:2011-11-25 9:51:26
6楼 丰胸产品哪个好
Post:2011-11-22 14:15:12
5楼 风淋室
Post:2011-11-18 14:36:25
4楼 诊股专家
Post:2011-11-18 13:27:39
3楼 股票培训学校
Post:2011-11-18 10:37:58
2楼 图图
Post:2011-11-17 16:13:39
1楼 php学习
Post:2011-11-15 9:39:56