懒人之家--可能是JS网页特效代码收集最全的懒站!
更多

简单可自定义切换方式的jQuery选项卡代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-05-06
简单可自定义切换方式的jQuery选项卡代码,可批量,自定义当前显示,自定义事件,自定义切换方式及自动播放的tab选项卡插件。


js代码

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/tab.js"></script>
<script>
$(function () {

  /**
	=========== 参数说明 ============
	curDisplay: 当前显示哪张
	mouse: 鼠标事件 (click/over)
	changeMethod: 切换方式 (default/vertical/horizontal/opacity)
	autoPlay: 自动播放 (true/false)
   */

  // 多个元素同一个变化方式
  /*$('.tab').each(function () {
	$(this).tab({
	  curDisplay: 5,
	  mouse: 'over',
	  changeMethod: 'vertical'
	});
  });*/

  // 多个元素不同变化方式(需要在HTML中加入js-tab)
  $('[js-tab=1]').tab();

  $('[js-tab=2]').tab({
	curDisplay: 2,
	changeMethod: 'horizontal'
  });

});
</script>