Question

这是一段选项卡切换js代码，请教IT大神，这段代码如何修改能够实现一个页面中重复使用？

function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
//获取鼠标滑过或点击的标签和要切换内容的元素
var titles=$('notice-tit').getElementsByTagName

('li'),
divs=$('notice-con').getElementsByTagName('div');
if(titles.length!=divs.length)
return;
//遍历titles下所有的li
for(var i=0;i<titles.length;i++){
titles[i].id = i;
titles[i].onmouseover =

function(){
//清除所有li上的class
for(var j=0;j<titles.length;j++){
titles[j].className = '';
divs[j].style.display = 'none';
}
//设置当前为高亮显示
this.className = 'select';
divs[this.id].style.display =

'block';
}
}
}

Answer 1

notice-tit  notice-con这两个替换成你再次使用的就行

function handleTab(titId, divId) {
    var titles=$(titId).getElementsByTagName

('li'),
divs=$(divId).getElementsByTagName('div');
if(titles.length!=divs.length)
return;
//遍历titles下所有的li
for(var i=0;i<titles.length;i++){
titles[i].id = i;
titles[i].onmouseover = 

function(){
//清除所有li上的class
for(var j=0;j<titles.length;j++){
titles[j].className = '';
divs[j].style.display = 'none';
}
//设置当前为高亮显示
this.className = 'select';
divs[this.id].style.display = 

'block';
}
}
}

handleTab('notice-tit', 'notice-con');
handleTab('notice-tit-2', 'notice-con-2');
.............