Thanks Vic for your script. Nice site, too.
I must be installing it wrong. Here's what I did:
My result:
http://tinyurl.com/7h9tpkb
To my style sheet I added:
#tst {
position:relative;width:500px;height:300px;border:solid red 1px;
}
#tst .tabs{
position:absolute;overflow:hidden;width:100px;height:300px;border-Right:solid red 1px;
}
#tst .tab{
width:100px;height:75px;background-Color:#FFFFCC;border-Bottom:solid red 1px;cursor:pointer;
}
#tst .tabactive{
background-Color:#FFCC66;color:#FFFFCC;
}
#tst .tabmouse{
background-Color:#FFFF99;
}
#tst .content{
position:absolute;left:100px;top:0px;width:400px;height:300px;
}
#tst .page{
width:400px;height:300px;background-Color:#FFFFCC;
}
WordPress html body I added:
<div id="tst">
<div class="content" >
<div class="page" >page 1</div>
<div class="page" >page 2</div>
<div class="page" >page 3</div>
<div class="page" >page 4</div>
</div>
<div class="tabs" >
<div class="tab" >Tab 1</div>
<div class="tab" >Tab 2</div>
<div class="tab" >Tab 3</div>
<div class="tab" >Tab 4</div>
</div>
</div>
In the HEAD of the page I added:
<script type="text/javascript">
/*<![CDATA[*/
// Tab Menu (20-May-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcTabMenu={
init:function(o){
var id=o.ID,p=document.getElementById(id),pages=this.bycls(o.PageClass,p),cls=o.TabDefaultClass,tabs=this.bycls(cls,p),acls=o.TabActiveClass,mcls=o.TabMouseClass,cl s=[cls,cls+(acls?' '+acls:''),cls+(mcls?' '+mcls:'')],z0=0;
p.style.overflow='hidden';
this[id]={
pages:pages,
tabs:tabs,
cls:cls,
nu:0
}
for (var z0=0;z0<pages.length;z0++){
if (tabs[z0]){
pages[z0].style.position='absolute';
pages[z0].style.zIndex=z0>0?'0':'1';
pages[z0].style.left='0px';
pages[z0].style.top='0px';
tabs[z0].className=cls[z0>0?0:1];
this.addevt(tabs[z0],'mouseup','Page',id,z0);
this.addevt(tabs[z0],'mouseover','mse',id,z0);
this.addevt(tabs[z0],'mouseout','mse',id,z0);
}
}
},
Page:function (id,nu){
var obj=this[id];
if (obj&&obj.tabs[nu]){
obj.tabs[obj.nu].className=obj.cls[0];
obj.tabs[nu].className=obj.cls[1];
obj.pages[obj.nu].style.zIndex='0';
obj.pages[nu].style.zIndex='1';
obj.nu=nu;
}
},
mse:function (id,nu,e){
var obj=this[id];
if (obj&&obj.tabs[nu]&&obj.tabs[nu].className!=obj.cls[1]){
obj.tabs[nu].className=obj.cls[e.type=='mouseout'?0:2];
}
},
bycls:function (nme,el){
for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
return ary;
},
addevt:function(o,t,f,p,p2){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p2,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p2,e); });
}
}
zxcTabMenu.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
PageClass:'page', // the common class name of the pages. (string)
TabDefaultClass:'tab', // the common class name of the tabs. (string)
TabMouseClass:'tabmouse', //(optional) the tab mouseover class name. (string, default = no mouseover class)
TabActiveClass:'tabactive' //(optional) the tab active class name. (string, default = no active class)
});
/*]]>*/
</script>