将两个div左右并列显示并实现点击标题切换内容_javascript技巧

首页

嘿嘿，无视div原始class值。

测试

继续无视h3原始class值。

无聊

h3没有值也可以～

傻蛋

div没有值一样可以～

首页

1. 嘿嘿，无视容器原始class值。

测试

1. 继续无视h3原始class值。

无聊

1. h3没有值也可以～

傻蛋

1. div没有值一样可以～

首页

嘿嘿，无视h3原始class值。

测试

继续无视div原始class值。

无聊

h3没有值也可以～

傻蛋

class值相似一样也可以～

指定class后，即时再多一个div也行。

function tab(id,hx,box,iClass,s,pr){
var hxs=Pid(id,hx);
var boxs=Pid(id,box);
if(!iClass){ // 如果不指定class，则：
boxsClass=boxs; // 直接使用box作为容器
}
else{ // 如果指定class，则：
var boxsClass = [];
for(i=0;iif(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配
boxsClass.push(boxs[i]);
}
}
}
if(!pr){ // 如果不指定预展开容器，则：
go_to(0); // 默认展开序列
yy();
}
else {
go_to(pr);
yy();
}
function yy(){
for(var i=0;ihxs[i].temp=i;
if(!s){// 如果不指定事件，则：
s="onmouseover"; // 使用默认事件
hxs[i][s]=function(){
go_to(this.temp);
}
}
else{
hxs[i][s]=function(){
go_to(this.temp);
}
}
}
}
function go_to(pr){
for(var i=0;iif(!hxs[i].tmpClass){
hxs[i].tmpClass=hxs[i].className+=" ";
boxsClass[i].tmpClass=boxsClass[i].className+=" ";
}
if(pr==i){
hxs[i].className+=" up"; // 展开状态：标题
boxsClass[i].className+=" up"; // 展开状态：容器
}
else {
hxs[i].className=hxs[i].tmpClass;
boxsClass[i].className=boxsClass[i].tmpClass;
}
}
}
}
tab("tab01","h3","div","","onclick",2); tab("tab02","h4","ol");tab("tab03","h3","div","tab");
//-->