论坛中滑动门效果的实现，默认discuz,无须额外js代码

论坛中常常用到滑动门的效果，很多不知道的制作人员经常自己添加而外的代码来实现这种效果，因此增多了额外的代码量，这里，介绍一种discuz默认的js实现方式，用dz默认的方式就可以实现这种效果。

1. <div class="cl">
   
2.                 <div class="nav">
   
3.                     <em id="indexbox_1" class="on" onmouseover="switchTab('indexbox',1,2,'on');"><span>今日关注</span></em>
   
4.                     <em id="indexbox_2" onmouseover="switchTab('indexbox',2,2,'on');"><span>本周热议</span></em>
   
5.                 </div>
   
6.             </div>
   
7.                        
   
8.                         <div  id="indexbox_c_1" style="display:block;">
   
9.             <!--[diy=diy4]--><div id="diy4" class="area"></div><!--[/diy]-->
   
10.                         </div>
    
11.                         <div  id="indexbox_c_2" style="display:none">
    
12.            <!--[diy=diy5]--><div id="diy5" class="area"></div><!--[/diy]-->
    
13.                         </div>

复制代码

上例列出了一个实例，下面我就给大家分析下这段代码，和代码中的js函数。
这里运用鼠标经过事件触发函数switchTab（）来实现滑动效果：
function switchTab(prefix, current, total, activeclass) {
    $F('_switchTab', arguments);
}
此函数调用common_extra.js中的Js函数：

1. function _switchTab(prefix, current, total, activeclass) {
   
2.         activeclass = !activeclass ? 'a' : activeclass;
   
3.         for(var i = 1; i <= total;i++) {
   
4.                 var classname = ' '+$(prefix + '_' + i).className+' ';
   
5.                 $(prefix + '_' + i).className = classname.replace(' '+activeclass+' ','').substr(1);
   
6.                 $(prefix + '_c_' + i).style.display = 'none';
   
7.         }
   
8.         $(prefix + '_' + current).className = $(prefix + '_' + current).className + ' '+activeclass;
   
9.         $(prefix + '_c_' + current).style.display = '';
   
10. }

复制代码

分析这个函数可以知道：
switchTab('indexbox',1,2,'on');中的
indexbox：onmouseover函数作用的html标签的id,用来动态给予class以使当前状态下的标签获得不同的展示类效果。
1：当前要展示的id代号，注意这里的要和你的标签的id数字标示一直例如indexbox_1。
2：是你的滑动门总共有多少个，这里用来控制循环的次数。这里只有两个滑动门交互，故这里的两个参数都为2。
on:你当前激活状态的滑动门的class修饰类，默认为a
滑动门的控制显示标签：
<div  id="indexbox_c_1" style="display:block;">
的id格式是固定的，$(prefix + '_c_' + i)，即前缀和数字编号之间用_c_ 来连接。

下面你就可以来试一试了！

正需要这方面的东西呢，谢谢哟！

学习了

学习学习!!

学习学习!!

往哪个地方用啊

学习了

看不懂啊  基础不行