Der's Blog 通用标签切换封装JS[0824更新]
展开/收缩script部分：
/**************************************
*Filename: setTab标签切换js
*Version: 2.0.0(2009-08-24)
*Author: jasy[TMUED]
参数说明：
id1:标签切换父容器的ID
tag1:标签切换的相应标签
tabclass:标签选中状态的class
id2:切换内容的父容器ID
tag2:切换内容的相应子标签
changeEvent:标签切换的触发事件(值为click时为点击切换,值为hover时为鼠标经过切换)
changeTime:是否定时切换changeTime值即为定时切换间隔时间(毫秒为单位)，无则不定时切换
isClick:是否单击开关内容区(可选true或false值);
isClickAll:是否单独开关内容区（可选true或false值）;
fadeTime:是否渐显效果,值为渐显速度(毫秒为单位).无值则为无渐显动画;
(提示：IE下id2的tag2须CSS触发IE的layout属性alpha值才有效,例如设置zoom:1.)
isReturnFalse:是否return false;
isConIdNum:是否内容区以id+数字下标的方式[下标从1开始].
onNum:设置默认第几个标签打开
isOpenOne:是否默认打开一个，false则为全关闭
***************************************/
//标签切换主函数
function j_setTab(tabId, tag1, tabclass, conId, tag2, changeEvent, changeTime, isClick, isClickAll, fadeTime, isReturnFalse, isConIdNum, onNum ,isOpenOne) {
onNum–;
var tli = document.getElementById(tabId).getElementsByTagName(tag1);
if (!isConIdNum) {
var cli = document.getElementById(conId).getElementsByTagName(tag2);
}
var opaStep = 0.1;
var isScroll = true;
//初始化设置所有
for (i = 0; i < tli.length; i++) {
tli[i].className = ”;
if (isConIdNum) {
document.getElementById(conId + (i+1)).style.display = “none”;
} else {
cli[i].style.display = “none”;
}
}
//设置当前
if(isOpenOne){
tli[onNum].className = tabclass;
}
/* setTabCon(onNum);*/
if (isConIdNum) {
document.getElementById(conId + (onNum+1)).style.display = “block”;
} else {
if(isOpenOne){
cli[onNum].style.display = “block”;
}
}
//遍历元素执行函数
for (i = 0; i < tli.length; i++) {
tli[i].value = i;
tli[i].onmouseout = function() {
isScroll = true;
}
tli[i].onmouseover = function() {
isScroll = false;
}
if (changeEvent == “click”) {
tli[i].onclick = function() {
setTabCon(this.value);
if (isReturnFalse) {
return false;
}
}
} else if (changeEvent == “hover”) {
tli[i].onmouseover = function() {
setTabCon2(this.value);
isScroll = false;
}
tli[i].onclick = function() {
setTabCon(this.value);
if (isReturnFalse) {
return false;
}
}
}
}
//设置标签标题与内容切换[对应click事件]
function setTabCon(n) {
if (isClickAll) {
tli[n].className = (tli[n].className == tabclass) ? “”: tabclass;
if (fadeTime) {
if (isConIdNum) { (document.getElementById(conId + (n+1)).style.display == “block”) ? fadeOut(document.getElementById(conId + (n+1))) : fadeIn(document.getElementById(conId + (n+1)));
} else { (cli[n].style.display == “block”) ? fadeOut(cli[n]) : fadeIn(cli[n]);
}
} else {
if (isConIdNum) {
document.getElementById(conId + (n+1)).style.display = (document.getElementById(conId + (n+1)).style.display == “block”) ? “none”: “block”;
} else {
cli[n].style.display = (cli[n].style.display == “block”) ? “none”: “block”;
}
}
} else if (isClick) {
for (j = 0; j < tli.length; j++) {
if (n == j) {
tli[j].className = (tli[j].className == tabclass) ? “”: tabclass;
} else {
tli[j].className = “”;
}
if (isConIdNum) {
if (fadeTime) {
if (n == j) {
if (document.getElementById(conId + (j+1)).style.display == “none”) {
fadeIn(document.getElementById(conId + (j+1)));
} else {
fadeOut(document.getElementById(conId + (j+1)))
}
} else {
document.getElementById(conId + (j+1)).style.display = “none”;
/*fadeOut(document.getElementById(conId+j));*/
}
} else {
if (n == j) {
document.getElementById(conId + (j+1)).style.display=(document.getElementById(conId + (j+1)).style.display == “none”)?’block’:'none’;
} else {
document.getElementById(conId + (j+1)).style.display = “none”;
/*fadeOut(cli[j]);*/
}
}
} else {
if (fadeTime) {
if (n == j) {
if (cli[j].style.display == “none”) {
fadeIn(cli[j]);
} else {
fadeOut(cli[j])
}
} else {
cli[j].style.display = “none”;
/*fadeOut(cli[j]);*/
}
} else {
if (n == j) {
cli[j].style.display=(cli[j].style.display == “none”)?’block’:'none’;
} else {
cli[j].style.display = “none”;
/*fadeOut(cli[j]);*/
}
}
}
}
onNum = n;
} else {
for (j = 0; j < tli.length; j++) {
tli[j].className = n == j ? tabclass: “”;
if (isConIdNum) {
if (fadeTime) {
if (n == j) {
if (document.getElementById(conId + (j+1)).style.display == “none”) {
fadeIn(document.getElementById(conId + (j+1)));
}
} else {
document.getElementById(conId + (j+1)).style.display = “none”;
/*fadeOut(document.getElementById(conId+(j+1)));*/
}
} else {
document.getElementById(conId + (j+1)).style.display = n == j ? “block”: “none”;
}
} else {
if (fadeTime) {
if (n == j) {
if (cli[j].style.display == “none”) {
fadeIn(cli[j]);
}
} else {
cli[j].style.display = “none”;
/*fadeOut(cli[j]);*/
}
} else {
cli[j].style.display = n == j ? “block”: “none”;
}
}
}
onNum = n;
}
}
//设置标签标题与内容切2[对应hover事件]
function setTabCon2(n) {
for (j = 0; j < tli.length; j++) {
tli[j].className = n == j ? tabclass: “”;
if (isConIdNum) {
if (fadeTime) {
if (n == j) {
if (document.getElementById(conId + (j+1)).style.display == “none”) {
fadeIn(document.getElementById(conId + (j+1)));
}
} else {
document.getElementById(conId + (j+1)).style.display = “none”;
/*fadeOut(document.getElementById(conId+(j+1)));*/
}
} else {
document.getElementById(conId + (j+1)).style.display = n == j ? “block”: “none”;
}
} else {
if (fadeTime) {
if (n == j) {
if (cli[j].style.display == “none”) {
fadeIn(cli[j]);
}
} else {
cli[j].style.display = “none”;
/*fadeOut(cli[j]);*/
}
} else {
cli[j].style.display = n == j ? “block”: “none”;
}
}
}
onNum = n;
}
//设置透明度
function setAlpha(obj, opa) {
document.all ? obj.style.filter = “Alpha(opacity=” + opa * 100 + “)”: obj.style.opacity = opa;
}
//渐显
function fadeIn(obj) {
obj.style.display = “block”;
var opa = 0;
function setFadeIn() {
if (opa < 1) {
setAlpha(obj, opa);
opa += opaStep;
setTimeout(setFadeIn, fadeTime);
}
}
setFadeIn();
}
//渐隐
function fadeOut(obj) {
var opa = 1;
function setFadeOut() {
if (opa > 0) {
setAlpha(obj, opa);
opa -= opaStep;
setTimeout(setFadeOut, fadeTime);
} else {
obj.style.display = “none”;
}
}
setFadeOut();
}
//定时切换
if (changeTime) {
function setTiming() {
if (isScroll) {
setTabCon2(onNum);
onNum++;
onNum = (onNum == tli.length) ? 0 : onNum;
}
setTimeout(setTiming, changeTime);
}
setTiming();
}
}
页面HTML调用部分·[示例]：
<script type=”text/javascript”> setTab(‘photo-tab’, ‘li’, ‘on’, ‘photo-tab’, ‘div’,'hover’,2000,false,false,20,false,false);</script>