[求助]JS滑动门 动态标签个数的JS滑动门实现方法

Question

function mSHOW(id){ 
for (n=1;n<=4;n++)
{
mOBJ=document.getElementById('m'+n);
cOBJ=document.getElementById('c'+n);
if (n==id)
{
mOBJ.className='sel_on';
cOBJ.className='list_show';
}
else
{
mOBJ.className='sel_off';
cOBJ.className='list_hidden';
}
}
以上JS代码用来做滑动门效果。用JS控制DIV的样式切换实现的。
但是这样只能使用在固定标签个数的地方。
现在有一个地方因为滑动门标签个数是不一定的。1<n<9求助有什么办法能实现动态标签个数的JS滑动门效果
先谢了。

Answer 1

function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("滑动项目数量不匹配");
return false;
}
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i]).onclick = function(){

for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menus[this.value]).className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["MainTitle1","MainTitle2","MainTitle3","MainTitle4","MainTitle5","MainTitle6","MainTitle7","MainTitle8","MainTitle9"],/*滑动门id*/["Main_content1","Main_content2","Main_content3","Main_content4","Main_content5","Main_content6","Main_content7","Main_content8","Main_content9"],/*对应显示id*/"Activat","Inactive"/*滑动门样式*/);
}把循环写在SDmodel.sd()就ok

Answer 2

function mSHOW(id){ 
for (n=1;n<=4;n++)
{
    mOBJ=document.getElementById('m'+n);
    cOBJ=document.getElementById('c'+n);
    if (n==id)
        {
            mOBJ.className='sel_on';
            cOBJ.className='list_show';
            break;//楼主是不是忘了加这句？
        }
    else
        {
            mOBJ.className='sel_off';
            cOBJ.className='list_hidden';
        }
}

Answer 3

感谢提醒。JS好像对这个要求没C那么严格。嘿嘿。居然没报错。