js 点击标题显示/隐藏层内内容(任意数量,可设css)

 1 < SCRIPT  src ="tabcontrol.js"  type =text/javascript ></ SCRIPT >
 2
 3 </ HEAD >
 4 < BODY >
 5
 6 < DIV  id =tabControl >
 7      < DIV  id =1  titletext ="基本资料" >
 8         11
 9      </ DIV >
10      < DIV  id =2  titletext ="屏幕参数" > 1 </ DIV >
11 </ DIV >
12 < SCRIPT  type =text/javascript >
13        var _tabControl=CreateTabControl("tabControl",false);
14 _tabControl.pageClassName="TabPage";
15        _tabControl.init();
16     </ SCRIPT >
17 </ BODY ></ HTML >

js

js
  1function TabControl(id)
  2{
  3    var This=this;
  4    this.id=id;
  5    this.element=document.getElementById(id);
  6    this.items=[];
  7    this.allHidden=false;
  8    this.titlePanelClassName="";//标题面板 Class Name
  9    this.titleButtonClassName="";//标题按钮 Class Name
 10    this.activatedTitleButtonClassName=""//活动页的标题按钮 ClassName
 11    this.lastPageTitleButtonClassName="";//最后一页标题按钮 Class Name
 12    this.lastPageActivatedTitleButtonClassName="";//最后一页活动页的标题按钮 Class Name
 13    this.pageClassName="";//页 Class Name
 14    this.tabClickHandler=null;
 15    
 16    this.show=function(tabPage)
 17    {
 18        for(var i=0;i<This.items.length;i++)
 19        {
 20            if(This.items[i].id!=tabPage.id)
 21            {
 22                This.items[i].hidden();
 23            }
 24            else
 25            {
 26                This.items[i].show();
 27            }
 28        }
 29    }
 30    
 31    //初化化
 32    this.init=function()
 33    {
 34        //读取加载页
 35        var divs=This.element.getElementsByTagName("DIV");
 36        var tabPages=[];
 37        for(var i=0;i<divs.length;i++)
 38        {
 39            if(divs[i].parentNode==This.element)
 40                tabPages[tabPages.length]=divs[i];
 41        }
 42
 43        for (var i = 0; i<tabPages.length; i++) {
 44            var tabPage = tabPages[i];
 45            
 46            This.items[This.items.length]=tabPage;
 47            
 48            if(!tabPage.className)
 49            {
 50                tabPage.className=This.pageClassName;
 51            }
 52            
 53            if(!tabPage.titleButtonClassName)
 54                tabPage.titleButtonClassName=tabPage.titlebuttonclassname;
 55            if(!tabPage.titleButtonClassName)
 56                tabPage.titleButtonClassName=tabPage.TitleButtonClassName;
 57                
 58            if(!tabPage.activatedTitleButtonClassName)
 59                tabPage.activatedTitleButtonClassName=tabPage.activatedTitleButtonClassName;
 60            if(!tabPage.activatedTitleButtonClassName)
 61                tabPage.activatedTitleButtonClassName=tabPage.ActivatedTitleButtonClassName;
 62 
 63 
 64            if(!tabPage.titleButtonClassName)
 65            {
 66                if(i<tabPages.length-1)
 67                    tabPage.titleButtonClassName=This.titleButtonClassName;
 68                else
 69                    tabPage.titleButtonClassName=This.lastPageTitleButtonClassName;
 70            }
 71
 72            if(!tabPage.activatedTitleButtonClassName)
 73            {
 74                if(i<tabPages.length-1)
 75                    tabPage.activatedTitleButtonClassName=This.activatedTitleButtonClassName;
 76                else
 77                    tabPage.activatedTitleButtonClassName=This.lastPageActivatedTitleButtonClassName;
 78            }
 79
 80            tabPage.isShow=function()
 81            {
 82                return this.style.display!="none";
 83            }
 84            
 85            tabPage.hidden=function()
 86            {
 87                this.style.display="none";
 88                this.titleButton.className=this.titleButtonClassName;
 89                if(This.allHidden)
 90                    this.titleButton.innerHTML=this.titletext+"▲";
 91                
 92            }
 93            tabPage.show=function()
 94            {
 95                this.style.display="";
 96                this.titleButton.className=this.activatedTitleButtonClassName;
 97                if(This.allHidden)
 98                    this.titleButton.innerHTML=this.titletext+"▼";   
 99            }
100        }
101    
102        //初始化标题面板;
103        var titlePanel=document.createElement("DIV");
104        This.element.insertBefore(titlePanel,This.element.firstChild);
105        titlePanel.className=This.titlePanelClassName;
106        
107        //初始化标题按钮
108        for(var i=0;i<This.items.length;i++)
109        {
110            var div=document.createElement("DIV");
111            titlePanel.appendChild(div);
112            This.items[i].titleButton=div;
113            
114            div.index=i;
115            div.innerHTML=This.items[i].titletext;
116               
117            div.onclick=function()
118            {   
119                if(This.tabClickHandler!=null)
120                {
121                    var bool1=eval(This.tabClickHandler+"(this);");
122                    if(bool1)return;
123                }
124                if(This.allHidden&&This.items[this.index].isShow())
125                {
126                    This.items[this.index].hidden();
127                }
128                else
129                {
130                    This.show(This.items[this.index]);
131                    
132                }
133            }
134            
135        }
136        
137        var clearDiv=document.createElement("DIV");
138        titlePanel.appendChild(clearDiv);
139        clearDiv.style.clear="both";
140        
141        //初始呈现状态
142        for(var i=0;i<This.items.length;i++)
143        {
144            if(This.allHidden||(!This.allHidden&&i>0))
145                This.items[i].hidden();
146            else if(i==0)
147                This.show(This.items[0]);
148        }
149    }
150}
151
152function CreateTabControl(id,allHidden,style)
153{
154    if(!allHidden)allHidden=false;
155    if(!style)style="Default";
156    
157    var tabControl=new TabControl(id);
158    tabControl.titlePanelClassName=style+"_TitlePanel";
159    tabControl.titleButtonClassName=style+"_TitleButton";
160    tabControl.activatedTitleButtonClassName=style+"_ActivatedTitleButton";
161    tabControl.lastPageTitleButtonClassName=style+"_LastPageTitleButton";
162    tabControl.lastPageActivatedTitleButtonClassName=style+"_LastPageActivatedTitleButton";
163    tabControl.pageClassName=style+"_Page";
164    tabControl.allHidden=allHidden;
165    return tabControl;
166}

源码

转载于:https://www.cnblogs.com/zwl12549/archive/2008/07/17/1245122.html