走过平凡人生、留下平凡足迹 注册 | 登陆

利用jQuery写的 - 单钩子 - 可扩展 - 3分离 - 选项卡tabs效果

Submitted by aming on 2008, March 19, 4:35 PM. JQUERY

xml/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>选项卡 - Zehee</title>  
  6. <script type="text/javascript" src="jquery/jquery.js"></script>  
  7. <script type="text/javascript">  
  8. jQuery(function($){  
  9.   
  10. /*Ztabs函数 - By Zehee*/  
  11. function Ztabs(Tid,TitleOn,Cont,M){  
  12. // Zehee - Tabs参数解释。  
  13. // Tid - 选项卡外层ID,页面中唯一的钩子。  
  14. // TitleOn - 选项卡选中时的class样式名称。  
  15. // Cont - 内容区的class样式名称。  
  16. // M - 选项之间的间距插补。  
  17.     var titles = $(Tid).children("h2");  
  18.     $(Tid).css({position:"relative"});  
  19.     titles.css({position:"absolute",top:"0",zoom:"100%"});  
  20.     $(Tid).children("div").addClass(Cont).hide();  
  21.     $(Tid).children("div:first").show();  
  22.     if(!titles.hasClass(TitleOn)){  
  23.         $(Tid).children("h2:first").addClass(TitleOn);  
  24.     }  
  25.     titles.each(function(){  
  26.         $(this).bind("click",function(){ //可更换为Mouseover形式  
  27.             titles.removeClass(TitleOn);  
  28.             $(this).addClass(TitleOn);  
  29.             $(Tid).children("div").hide();  
  30.             $(this).next("div").show("slow"); // 可更换为其他动画形式  
  31.         });  
  32.     });  
  33.     for(var i = 1;i < titles.length;i ++){  
  34.         $(titles[i]).css("left",$(titles[i-1]).offset().left - $(Tid).offset().left + $(titles[i-1]).width() + M + "px")  
  35.     }  
  36. }  
  37.   
  38. $("#tabs").ready(function(){Ztabs("#tabs","on","cont",50);}) // 在此可添加多组选项卡  
  39.   
  40.   
  41.   
  42. /*动态添加标签项示例 - By Zehee*/  
  43. function Addnav(ButtId,TabId){  
  44.     $(ButtId).click(function(){  
  45.         $(TabId).append("<h2>新标签</h2><div>新内容</div>");  
  46.         Ztabs("#tabs","on","cont",50);  
  47.     });  
  48. }  
  49.   
  50. Addnav("#addnav","#tabs");  
  51. });  
  52. </script>  
  53. <style type="text/css">  
  54. <!--  
  55. * { margin: 0px; padding: 0px; }  
  56. body { padding:200px }  
  57. p { padding:5px }  
  58. #tabs { border:1px solid #fff; position: relative;}  
  59. #tabs h2 { border:1px solid #ccc; font: normal 12px/30px Arial, Helvetica, sans-serif; height:30px; padding:0 20px; border-bottom-width:0px; color: #666666; }  
  60. #tabs .on { border-color:#036;font-weight: bold; background:#D9ECFF; color: #003366; }  
  61. #tabs .cont { border:1px solid #036; margin-top:30px; padding:20px; background:#D9ECFF; font-size: 12px; line-height: 20px; }  
  62. -->  
  63. </style>  
  64. </head>  
  65. <body>  
  66. <p>  
  67.  <input type="button" id="addnav" value="添加标签项" />  
  68. </p>  
  69. <div id="tabs">  
  70.  <h2>每日新闻</h2>  
  71.  <div>百度董事长兼CEO李彦宏在上海出席一个投资年会时表示，百度近年增加了IM、贴吧等产品，是为增加用户粘度，不偏离搜索方向，这也是百度与谷歌雅虎的区别之一。 他指出，百度的目标是提供最好方式，让人们找到信息，搜索引擎仍是最有效方式，过去一年与可预见未来，搜索都将是百度最重要业务。</div>  
  72.  <h2>网络直通车</h2>  
  73.  <div>3月18日消息，据国外媒体报道，Google CEO埃里克·施密特本周一表示，Google担心微软每一起像雅虎这样规模的并购交易。</div>  
  74.  <h2>电影秀</h2>  
  75.  <div>第二届亚洲电影大奖昨晚在香港落幕，梁朝伟凭借《色，戒》中的表演摘得影帝桂冠。</div>  
  76.  <!--在此添加 <h2>新标签</h2> <div>内容</div> 即可扩展新标签项-->  
  77. </div>  
  78. </body>  
  79. </html>  

Tags: jquery, ajax, javascript

« 上一篇 | 下一篇 »

Trackbacks

点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5

发表评论

评论内容 (必填):