直接配置生成tab页

2015/03/09 32844
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>tabTemplate.html</title>
  </head>
  <style>
     div{margin: 0px; padding: 0px;}
       /*标签背景，间距*/
       .title{width:100%;height:24px;margin-top:1px;float:left;background:url("images/head_bg.png") repeat-x;}
       .titleMargin{cursor:pointer;float:left;margin-left:3px;}
     .title:after{_content:''; }
     .tabLeft{float:left;margin:2px 0 0 0;}
     .tabMid{color:#064687;background:url("images/tabs_active_center.gif") repeat-x;padding:4px 0 0 0;float:left;margin-top:2px;}
     .tabRight{float:left;margin-top:2px;}
    
     a{text-decoration: none;}
     a:hover{color:red;}
     a:visited{color:#064687;}
    
     .isDisplayYColor a{color:red;}
     .isDisplayYColor a:visited{color:red;}
     .isDisplayNColor a{color:#064687;}
    
     .isDisplayY {display:block;}
     .isDisplayN {display:none;}
    
     /*内容*/
     .wrap{border: 1px solid #ccc;}
  </style>
  <body>
 
  <!-- 页面内容显示区域 -->
  <div class="wrap">
     <div class="title"></div>
     <div class="content"></div>
  </div>
 
    <SCRIPT type="text/javascript" src="common/javascripts/jquery/jquery.js"></SCRIPT>
    <SCRIPT type=text/javascript>jQuery.noConflict();</SCRIPT>
     <SCRIPT type="text/javascript" src="tabTemplate.js"></SCRIPT>
     <script type="text/javascript">
         
          /**
          * 使用方式，新建一个js文件：
          * var tabs = new Array();
               tabs[数组下标]={
                    tabid:'first',
                    tabname:'第一个tab',
                    tabsrc:'firsthtml.html',
                    isDisplay:'n'
               };
          * @2012-07-06
          */
    
          jQuery(function(){
               var title = jQuery('.title');
               var content = jQuery('.content');
               for(var i=0;i<tabs.length;i++){
                    var targettab = tabs[i];
                    if(typeof(targettab) != "undefined"){
                         //标签部分
                         var tabOutter = jQuery("<div class='"+targettab.tabid+"' onclick='changetab(this);'></div>").addClass("titleMargin");
                         var isDisplayColor = "" ;
                         var isDisplay = "" ;
                        
                         if(targettab.isDisplay=='y'){
                              isDisplayColor = "isDisplayYColor";
                              isDisplay = "isDisplayY" ;
                         }else{
                              isDisplayColor = "isDisplayNColor";
                              isDisplay = "isDisplayN" ;
                         }
                         var tabInner = jQuery("<div class='tabLeft'>" +
                                                       "<img src='images/tabs_active_left.gif'/>" +
                                                    "</div>" +
                                                    "<div class='tabMid "+isDisplayColor+"'>" +
                                                         "<a href='#'>"+targettab.tabname+"</a>" +
                                                    "</div>" +
                                                    "<div class='tabRight'>" +
                                                         "<img src='images/tabs_active_right.gif'/>" +
                                                    "</div>");
                         title.append(tabOutter.append(tabInner));
                        
                         //内容部分
                         var tabContent =  jQuery("<div class='"+isDisplay+"  "+targettab.tabid+"_content'>" +
                                                            "<iframe name='content_frame' marginwidth=0 marginheight=0 width=100% height=100% src='"+targettab.tabsrc+"' frameborder=0></iframe>" +
                                                       "</div>");
                         content.append(tabContent);
                    }
               };
          })
          function changetab(tab){
               jQuery.each(jQuery('.titleMargin'),function(){
                    //移除标题部分的样式
                    jQuery(this).children(".tabMid").removeClass("isDisplayYColor").removeClass("isDisplayNColor");
                    //获取内容展示部分的class
                    var contentClassName = getContentClassName(jQuery(this).attr('class'));
                    //移除内容部分的样式
                    jQuery("."+contentClassName+"").removeClass("isDisplayY").removeClass("isDisplayN").addClass("isDisplayN");
               });
               var targettab = jQuery(tab);
               //添加标题展示样式
               targettab.children(".tabMid").addClass("isDisplayYColor");
               var contentClassName = getContentClassName(targettab.attr('class'));
               //添加内容展示样式
               jQuery("."+contentClassName+"").removeClass("isDisplayN").addClass("isDisplayY");
          }
         
          function getContentClassName(classNames){
               alert(classNames);
               var className = classNames.substring(0,classNames.indexOf(" "));
               var contentClassName = className+"_content";
               return contentClassName;
          }
     </script>
  </body>
</html>
代码片段
