JS滑动门效果

一个JS滑动门

1、滑动门，通用型，理论上不限制滑动门个数，不用超级链接，跳转页面也用JS控制

function gameRankContent(cid,n,cname,conName){
/**
*cid:当前滑动门编号
*n:滑动门个数
*cname:滑动门ID号前缀
*conid：滑动门内容前缀
*/
for(var i = 1;i<=n;i++){
   if(cid == i){
    //alert('#'+conName+i);
    $('#'+conName+i).show();//传统JS中，样式display="block"
    $('#'+cname+i).css("background","url(images/nBg.gif)");//传统JS中，样式背景为空
    $('#'+cname+i).css("color","#FFF");//传统JS中，样式文字色彩
   }else{
    $('#'+conName+i).hide();//传统JS中，样式display="none"
    $('#'+cname+i).css("background","");//传统JS中，样式背景为空
    $('#'+cname+i).css("color","#000");//传统JS中，样式文字色彩
   }
}
}

function urlonclick(href){
location.href = href;
}

2、用超链接，外部写样式控制，JS内改变样className实现样式改变（通用型）

function swap_tab(cid,n,cname,conName){
   /**
   *cid:当前滑动门编号
   *n:滑动门个数
   *cname:滑动门ID号前缀
*conid：滑动门内容前缀
*/
for(var i=1;i<=n;i++){
       obj = document.getElementById(cname+i);
      cObj = document.getElementById(conName+i);
       if(cid == i){
          obj.className='active';
         cObj.style.display = "block";
        }else{
          obj.className='normal';
           cObj.style.display="none";
        }
}

}

转载自：http://hi.baidu.com/nbcc/blog/item/a80db4ecbf7867342797916a.html