网站

jquery.tabslet tab切换插件

分类 :jquery     2018-05-10 人气: 0条评论

一个tab切换插件非常好用
使用方法
 <div class='tabs'>
    <ul class='horizontal'>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id='tab-1'></div>
    <div id='tab-2'></div>
    <div id='tab-3'></div>
  </div>

  OR

  <div class='tabs'>
    <ul class='horizontal'>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
  </div>
  <div id='tabs_container'>
    <div id='tab-1'></div>
    <div id='tab-2'></div>
    <div id='tab-3'></div>
  </div>
在相应地方插入上面相关的类名就可以了

在下面加入
<script type="text/javascript" src="js/jquery.tabslet.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {

			$('.tabs_default').tabslet();

			$('.tabs_active').tabslet({
				active: 2
			});

			$('.tabs_hover').tabslet({
				mouseevent: 'hover',
				attribute: 'href',
				animation: false
			});

			$('.tabs_animate').tabslet({
				mouseevent: 'click',
				attribute: 'href',
				animation: true
			});

			$('.tabs_rotate').tabslet({
				autorotate: true,
				delay: 3000
			});

			$('.tabs_controls').tabslet();

			$('.before_event').tabslet();
			$('.before_event').on("_before", function() {
				alert('This alert comes before the tab change!')
			});

			$('.after_event').tabslet({
				animation: true
			});
			$('.after_event').on("_after", function() {
				alert('This alert comes after the tab change!')
			});

		});
	</script>
其中
$('.tabs_active').tabslet({
				active: 2
			});
这些是指的tab切换方式,有很多种样式,需要哪断只放哪段就可以。

评论

大侠名号:   验证暗号: 点击我更换图片

继续阅读