JS选项卡_IT岛 | www.IT-dao.com | 最绿色的科技门户网站

JS选项卡

时间:2011-09-14 21:48 来源:未知作者:admin 点击: 次

【内容简介】用到的JS函数： //id选项卡区域，title选项卡标题标签，classname切换区域class,checkclass标题选中，liid标签不唯一时可选参数为标题区域id function setTab(id,title,classname,checkclass,liId){ if (!document.getElem

用到的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>

.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>

调用选项卡方法：

window.onload=function(){

setTab("tab","h2","tab_d","selected");

}

示例二：

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>

</ul>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

调用JS方法：

window.onload=function(){

setTab("tab2","li","tab2_d","selected","tab2_t");

}

demo下载：http://download.csdn.net/detail/jyy_12/3599354

顶一下

(0)

踩一下

(0)