js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > js选项卡

HTML5 实现Tab选项卡动画切换特效代码

发布时间:2017-04-06 16:26:17    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

HTML5 实现Tab选项卡动画切换特效代码

HTML5 实现Tab选项卡动画切换特效代码

;( function( window ) {
	
	'use strict';

	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	function CBPFWTabs( el, options ) {
		this.el = el;
		this.options = extend( {}, this.options );
  		extend( this.options, options );
  		this._init();
	}

	CBPFWTabs.prototype.options = {
		start : 0
	};

	CBPFWTabs.prototype._init = function() {
		// tabs elems
		this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
		// content items
		this.items = [].slice.call( this.el.querySelectorAll( '.content-wrap > section' ) );
		// current index
		this.current = -1;
		// show current content item
		this._show();
		// init events
		this._initEvents();
	};

	CBPFWTabs.prototype._initEvents = function() {
		var self = this;
		this.tabs.forEach( function( tab, idx ) {
			tab.addEventListener( 'click', function( ev ) {
				ev.preventDefault();
				self._show( idx );
			} );
		} );
	};

	CBPFWTabs.prototype._show = function( idx ) {
		if( this.current >= 0 ) {
			this.tabs[ this.current ].className = this.items[ this.current ].className = '';
		}
		// change current
		this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
		this.tabs[ this.current ].className = 'tab-current';
		this.items[ this.current ].className = 'content-current';
	};

	// add to global namespace
	window.CBPFWTabs = CBPFWTabs;

})( window );



tab 选项卡 动画 切换

tab选项卡切换特效并且带更多按钮

jquery双重切换的tab选项卡特效代码

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery实现网页右下角向上弹出广告代码,支持tab切换

jquery左右布局的缓动Tab切换选项卡特效

jquery竖向tab切换焦点图特效

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

js tab选项卡新闻列表切换特效

jquery实现可触摸控制的tab选项卡特效

jquery定位滚动tab选项卡效果

jquery TabSwitch 选项卡插件

jquery实现支持响应的TAB手风琴特效代码

jquery实现向上滑动切换Tab选项卡特效

jQuery实现tab选项卡标签自动切换特效

jquery实现彩色标签图片tab选项卡滑动切换特效代码

jQuery滑动选项卡多个tab切换插件演示_js代码

横向(纵向)时间轴tab标签切换和水平(垂直)切换幻灯片效果 demo1# 横向滚动

js仿阿里巴巴的滑动TAB导航特效代码、不规则tab切换

js实现黑色不规则TAB选项卡特效代码

jquery选项卡切换,版块鼠标跟随边框变色特效

tab选项卡切换特效并且带更多按钮

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery左右布局的缓动Tab切换选项卡特效

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

jQuery选项卡风格下拉导航特效

js tab选项卡新闻列表切换特效

jquery鼠标滑过标签选项卡切换特效

jquery焦点选项卡图片切换特效,支持自动播放

JQuery仿网易右侧图文混排展示选项卡滑动层特效

jquery实现可触摸控制的tab选项卡特效

jquery定位滚动tab选项卡效果

jquery选项卡形式图片过滤筛选器特效

jquery图片内容滑动选项卡切换特效

jquery实现带滑块选项卡焦点图片,滚动切换特效

jquery实现选项卡形式,四屏焦点图片轮播特效,带控制的选项卡轮播

jquery实现带左右按钮控制滑动选项卡切换特效

友荐云推荐
大家说 此评论不代表本站观点