JSタブ
使用するJS関数:
//id ，title ，classname class,checkclass ，liid id
function setTab(id,title,classname,checkclass,liId){
if(!document.getElementById || !document.getElementsByTagName || !document.getElementById(id)) return false;
var id=document.getElementById(id);
if(!liId){
var title=id.getElementsByTagName(title);
}else{
var liId=document.getElementById(liId);
var title=liId.getElementsByTagName(title)
};
var div=id.getElementsByTagName("div");
var box=new Array();
for (var m=0;m<div.length;m++){
if (div[m].className==classname){
box.push(div[m]);
}
}
for (var i=0;i<title.length;i++){
title[i].onmouseover=function(){
var num=getIndex(this,title);
for (var j=0;j<title.length;j++ ){
title[j].className="";
box[j].style.display="none";
}
this.className=checkclass;
box[num].style.display="block";
}
}
}
//
function getIndex(con,conArray){
for (var p in conArray) {
if(con==conArray[p])return Number(p);
}
return -1;// ， -1
}<body>
<style type="text/css">
.tab{border:1px solid #000;width:300px;position:relative;height:150px;margin-bottom:30px;}
.tab h2{margin:0;float:left;font-size:12px;line-height:22px;width:100px;text-align:center;cursor:pointer;background-color:#EEEEEE;}
.tab .selected{background-color:red;}
.tab_d{position:absolute;left:0;top:25px;}
</style>
<div class="tab" id="tab">
<h2 class="selected"> </h2>
<div class="tab_d"> </div>
<h2> </h2>
<div class="tab_d" style="display:none"> </div>
<h2> </h2>
<div class="tab_d" style="display:none"> </div>
</div>window.onload=function(){
setTab("tab","h2","tab_d","selected");
}
<style type="text/css">
ul{margin:0;padding:0;list-style:none;}
.tab2{border:1px solid #000000;width:300px;}
.tab2_t li{float:left;width:100px;text-align:center;background-color:#EEEEEE;cursor:pointer;}
.tab2_t .selected{background-color:red;}
</style>
<div class="tab2" id="tab2">
<ul class="tab2_t" id="tab2_t">
<li class="selected"> </li>
<li> </li>
<li> </li>
</ul>
<div class="tab2_d">
<ul>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="tab2_d" style="display:none">
<ul>
<li>2</li>
<li>2</li>
</ul>
</div>
<div class="tab2_d" style="display:none">
<ul>
<li>3</li>
<li>3</li>
</ul>
</div>
</div>window.onload=function(){
setTab("tab2","li","tab2_d","selected","tab2_t");
}