jquery tab 选项卡功能

yiheng

浏览: 156597 次

最近访客更多访客>>

q4444tita

fangzhuplay

li276423525

fcuppvtkd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-08 ( 45)
2012-07 ( 36)
2012-06 ( 23)
更多存档...

jquery选项卡，带css样式的。支持ajax更新内容、页面同时出现多个tab选项卡而不影响其他选项卡内容。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery tab 选项卡</title> <meta http-equiv="author" content="hoojo"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .tab { background-color: mintcream; width: 200px; -width: 205px; height: 200px; margin-left: 200px; } .header { height: 20px; width: 100%; } .content { border: 1px solid #CCCCFF; border-top: none; height: 180px; } .liStyle { cursor: pointer; height: 20px; width: 66px; -width: 61px; float: left; background-color: white; } .show { background-color: mintcream; border: 1px solid #CCCCFF; border-bottom: none; } .hide { background-color: white; border-bottom: 1px solid #CCCCFF; } .ulHide { display: none; } .ulShow { display: block; } ul { list-style: none outside none; } * { margin: 0; padding: 0; } </style> <script type="text/javascript"> $(function () { $(".tab > ul.header > li").click(function () { $(this).parent().find("li.show").addClass("hide").removeClass("show"); $(this).addClass("show").removeClass("hide"); var parentsEl = $(this).parents(".tab"); parentsEl.find("div > ul.ulShow").addClass("ulHide").removeClass("ulShow"); /*页面静态内容*/ var ary = parentsEl.find("ul.header > li"); parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide"); /*用ajax动态加载内容 parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass(function () { var el = this; $.post("TreeDataServlet", {param: "params"}, function (data) { $(el).html(data); }); return "ulShow"; }).removeClass("ulHide");*/ }) }); </script> </head> <body bgcolor="white"> <div class="tab"> <ul class="header"> <li class="liStyle show">Java</li> <li class="liStyle hide">Spring</li> <li class="liStyle hide">Hibernate</li> </ul> <div class="content"> <ul class="ulShow"> Java <li>java javaSE</li> <li>java javaME</li> <li>java javaEE</li> </ul> <ul class="ulHide"> Spring <li>java springMVC</li> <li>java spring aop</li> <li>java spring Ioc DI</li> </ul> <ul class="ulHide"> Hibernate <li>java Hibernate Configuration Transaction</li> <li>java Hibernate Query Criteria</li> <li>java Hibernate Session SessionFactory</li> </ul> </div> </div> <hr/> <div class="tab"> <ul class="header"> <li class="liStyle show">Java</li> <li class="liStyle hide">Spring</li> <li class="liStyle hide">Hibernate</li> </ul> <div class="content"> <ul class="ulShow"> Java.... <li>java javaSE</li> <li>java javaME</li> <li>java javaEE</li> </ul> <ul class="ulHide"> Spring.... <li>java springMVC</li> <li>java spring aop</li> <li>java spring Ioc DI</li> </ul> <ul class="ulHide"> Hibernate.... <li>java Hibernate Configuration Transaction</li> <li>java Hibernate Query Criteria</li> <li>java Hibernate Session SessionFactory</li> </ul> </div> </div> </body> </html>

分享到：