注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery tab选项卡插件

jQuery插件 fishcity 1030浏览

jquery tab选项卡插件,轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能,非常好用,可轻松的用在企业站,门户特上,样式可以自定义,美观大方实用,来看用下吧。

构建html

<div class="box demo1">
			<ul class="tab_menu">
				<li class="current"><a href="http://www.jq22.com/">jquery特效</a></li>
				<li><a href="http://www.jq22.com/">javascript 特效</a></li>
				<li><a href="http://www.jq22.com/">div+css 教程</a></li>
				<li><a href="http://www.jq22.com/">html5 教程</a></li>
			</ul>
			<div class="tab_box">
				<div>
					<ul>
						<li><span>▪</span><a href="http://www.jq22.com/" title="jquery smartFloat插件制作仿产品列表页默认排序搜索框">jquery smartFloat插件制作仿产品列表页默认排序搜索框</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能">jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="jquery 图片延迟加载插件制作tab选项卡图片异步加载">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.jq22.com/" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.jq22.com/" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
						<li><span>▪</span><a href="http://www.jq22.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.jq22.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="用div+css制作一个CSS3的简约图标导航菜单">用div+css制作一个CSS3的简约图标导航菜单</a></li>
					</ul>
				</div>
				<div class="hide">
					<ul>
						<li><span>▪</span><a href="http://www.jq22.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
						<li><span>▪</span><a href="http://www.jq22.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					</ul>
				</div>
			</div>
		</div>

写入CSS样式

.box{width:400px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;}
.tab_menu{overflow:hidden;}
.tab_menu li{width:100px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;}
.tab_menu li.current{color:#333;background:#fff;}
.tab_menu li a{color:#fff;text-decoration:none;}
.tab_menu li.current a{color:#333;}
.tab_box{padding:20px;}
.tab_box li{height:24px;line-height:24px;overflow:hidden;}
.tab_box li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
.tab_box .hide{display:none;}}

引入核心文件,并写上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>
$(function(){

	$("img[original]").lazyload({ placeholder:"images/color3.gif" });
	
	$('.demo1').Tabs();
	
	//部分区域图片延迟加载
	function lazyloadForPart(container) {
		container.find('img').each(function () {
			var original = $(this).attr("original");
			if (original) {
				$(this).attr('src', original).removeAttr('original');
			}
		});
	}
});	

更多选项请参考实例代码。

转载请注明:jQ酷 » jQuery tab选项卡插件

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。