一个js的tab切换效果代码[代码分离]

  支持自动播放

  可定义鼠标事件延迟

  不限制html结构

  假设HTML如下:

  

复制代码 代码如下:

  <ul>

  <li id="t1">tab1</li>

  <li id="t2">tab2</li>

  <li id="t3">tab3</li>

  </ul>

  <div id="c1">content1</div>

  <div id="c2">content2</div>

  <div id="c3">content3</div>

  执行定义的tab初始化函数

  

复制代码 代码如下:

  <script>

  var tabType={

  trigger:'触发事件',

  tabCurrentClass:'当前tab的className'

  [,delay:'事件触发的延时',

  auto:'是否自动播放',

  timer:'自动播放周期']

  }

  // tabType的前两个是必需参数,后面的3个可根据需要添加

  // 其后的tab->content对应关系以数组形式添加,以其id为参数识别,如下:

  // [tab1.id,content1.id,'o'],[tab2.id,content2.id],……

  // 如果要设定某个tab默认是打开的,在后面加个”o”参数,如下:

  //eg: tabInit(tabType,[t1,c1,'o'],[t2,c2],…);

  }

  tabInit(type,['t1','c1','o'],['t2','c2'],['t3','c3']);

  </script>

  演示地址:http://demo.glzy8.com/js/tab_switch/tab.html

  打包下载地址:http://www.glzy8.com/jiaoben/25777.html