至少传入两个参数,第一个是面板标题的父级的ID,第二个是面板的父级的ID,另外两个参数有默认值,可以根据需要传入。需要高亮显示的类名默认用"on",也可以根据需要传入,具体说明可看注释。
代码如下:
/*
* tab切换页:
* tab("面板标题的父级的ID","面板父级的ID","触发事件的类型","高亮显示的类")
* 可以传入2-4四个参数,如果后两个参数没有传入,那么默认触发事件的类型为点击事件,默认的高亮的类请用"on",如果需要自定义高亮的类请传入第四个参数
* 例如:tab("title","pal")
* tab("title","pal","onclick",on)
*/
function tab(titleId, palId,event,style) {
// 获取面板标题的父级
var title = document.getElementById(titleId);
// 获取所有面板标题
var palTitles = title.children;
// 获取面板父级
var pal = document.getElementById(palId);
// 获取所有面板
var pals = pal.children;
// 没有设置触发事件的类型时,默认为点击事件
if (event == undefined) {
event = "onclick";
}
// 没有设置高亮显示的类时,默认类名为"on"
if (style == undefined) {
style = "on";
}
for (var i = 0; i < palTitles.length; i++) {
// 给每个面板标题绑定编号
palTitles[i].index = i;
// 给每个面板标题绑定响应函数
palTitles[i][event] = function () {
// 设置面板标题样式的切换
for (var j = 0; j < palTitles.length; j++) {
// 先清除所有面板标题的样式
palTitles[j].className = "";
}
// 给当前点击触发事件的面板标题添加样式
this.className = "on";
// 设置面板的切换
for (var x = 0; x < pals.length; x++) {
// 先将所有面板隐藏
pals[x].style.display = "none";
}
// 显示当前触发事件的面板标题对应的面板
pals[this.index].style.display = "block";
}
}
}