jquery鼠标滑过点击自动切换轻量级tab选项卡插件


jquery鼠标滑过点击自动切换轻量级tab选项卡插件
jquery鼠标滑过点击自动切换轻量级tab选项卡插件以及鼠标滑过、点击自动切换、轻量级tab选项卡等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.tabs.js"></script>
<script src="js/jquery.lazyload.js"></script>

2. HTML代码

<script type="text/javascript">
$(function(){
	$("img[original]").lazyload({ placeholder:"images/color3.gif" });
	$('.demo1').Tabs();
	$('.demo2').Tabs({
		event:'click'
	});
	$('.demo3').Tabs({
		timeout:300
	});
	$('.demo4').Tabs({
		auto:3000
	});
	$('.demo5').Tabs({
		event:'click',
		callback:lazyloadForPart
	});
	//部分区域图片延迟加载
	function lazyloadForPart(container) {
		container.find('img').each(function () {
			var original = $(this).attr("original");
			if (original) {
				$(this).attr('src', original).removeAttr('original');
			}
		});
	}
});	
</script>
	<div id="title">
		<h2>jQuery TAB插件演示</h2>
	</div>
	<div id="wrapper">
		<h3>默认状态</h3>
		<div class="box demo1">
			<ul class="tab_menu">
				<li class="current"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			</ul>
			<div class="tab_box">
				<div>
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery smartFloat插件制作仿产品列表页默认排序搜索框">jquery smartFloat插件制作仿产品列表页默认排序搜索框</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能">jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 图片延迟加载插件制作tab选项卡图片异步加载">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css制作一个CSS3的简约图标导航菜单">用div+css制作一个CSS3的简约图标导航菜单</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					</ul>
				</div>
			</div>
		</div><!--demo1 end-->
		<h3>鼠标点击</h3>
		<div class="box demo2">
			<ul class="tab_menu">
				<li class="current">jquery特效</li>
				<li>javascript 特效</li>
				<li>div+css 教程</li>
				<li>html5 教程</li>
			</ul>
			<div class="tab_box">
				<div>
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery smartFloat插件制作仿产品列表页默认排序搜索框">jquery smartFloat插件制作仿产品列表页默认排序搜索框</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能">jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 图片延迟加载插件制作tab选项卡图片异步加载">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css制作一个CSS3的简约图标导航菜单">用div+css制作一个CSS3的简约图标导航菜单</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					</ul>
				</div>
			</div>
		</div><!--demo2 end-->
		<h3>事件延迟 300毫秒</h3>
		<div class="box demo3">
			<ul class="tab_menu">
				<li class="current"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			</ul>
			<div class="tab_box">
				<div>
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery smartFloat插件制作仿产品列表页默认排序搜索框">jquery smartFloat插件制作仿产品列表页默认排序搜索框</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能">jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 图片延迟加载插件制作tab选项卡图片异步加载">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css制作一个CSS3的简约图标导航菜单">用div+css制作一个CSS3的简约图标导航菜单</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					</ul>
				</div>
			</div>
		</div><!--demo3 end-->
		<h3>自动轮换 3秒间隔</h3>
		<div class="box demo4">
			<ul class="tab_menu">
				<li class="current"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			</ul>
			<div class="tab_box">
				<div>
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery smartFloat插件制作仿产品列表页默认排序搜索框">jquery smartFloat插件制作仿产品列表页默认排序搜索框</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能">jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 图片延迟加载插件制作tab选项卡图片异步加载">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="用div+css制作一个CSS3的简约图标导航菜单">用div+css制作一个CSS3的简约图标导航菜单</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
						<li><span>▪</span><a href="http://www.51qianduan.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					</ul>
				</div>
			</div>
		</div><!--demo4 end-->
		<h3>回调函数</h3>
		<div class="box demo5">
			<ul class="tab_menu">
				<li class="current">jquery特效</li>
				<li>javascript 特效</li>
				<li>div+css 教程</li>
				<li>html5 教程</li>
			</ul>
			<div class="tab_box">
				<div>
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片特效插件 异步读取图片TOP排行榜特效"><img height="150" width="150" alt="jquery 图片特效插件 异步读取图片TOP排行榜特效" original="images/smalldb89cf912e07ed70f0c933c33e0cb976.jpg"></a>
				</div>
				<div class="hide">
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器"><img height="150" width="150" alt="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器" original="images/small28ee23b309f1dfec23e0488f9a4cffa6.jpg"></a>
				</div>
				<div class="hide">
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单"><img height="150" width="150" alt="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单" original="images/smallf988082285f9108d3b65b41c03bad4a4.jpg"></a>
				</div>
				<div class="hide">
					<a target="_blank" href="http://www.51qianduan.com/" title="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换"><img height="150" width="150" alt="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换" original="images/small7ec25ef488c710d8d8ac3e5a33d6034b.jpg"></a>
				</div>
			</div>
		</div><!--demo5 end-->
	</div>

相关推荐

发表评论

相关文章