jQuery选项卡自定义切换方式特效代码下载

jQuery选项卡自定义切换方式特效代码下载

1. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/tab.js"></script>

2. HTML代码

<div class="tab" js-tab="1">
<div class="tab-title">
  <a href="javascript:;" class="item item-cur">Tab1</a>
  <a href="javascript:;" class="item">Tab2</a>
  <a href="javascript:;" class="item">Tab3</a>
  <a href="javascript:;" class="item">Tab4</a>
  <a href="javascript:;" class="item">Tab5</a>
</div>
<div class="tab-cont">
  <ul class="tab-cont__wrap">
	<li class="item">Cont1</li>
	<li class="item">Cont2</li>
	<li class="item">Cont3</li>
	<li class="item">Cont4</li>
	<li class="item">Cont5</li>
  </ul>
</div>
</div>
<div class="tab" js-tab="2">
<div class="tab-title">
  <a href="javascript:;" class="item item-cur">Tab1</a>
  <a href="javascript:;" class="item">Tab2</a>
  <a href="javascript:;" class="item">Tab3</a>
  <a href="javascript:;" class="item">Tab4</a>
  <a href="javascript:;" class="item">Tab5</a>
</div>
<div class="tab-cont">
  <ul class="tab-cont__wrap">
	<li class="item">Cont1</li>
	<li class="item">Cont2</li>
	<li class="item">Cont3</li>
	<li class="item">Cont4</li>
	<li class="item">Cont5</li>
  </ul>
</div>
</div>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到