直接配置使用tabs

時間 2019-12-01

標籤直接配置使用 tabs 简体版

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>tabTemplate.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

</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">

          /**
          * 使用方式
          * 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>

:leftjavascript