jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡



108 430 144



特效描述:tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡,jquery 选项卡插件制作 ajax 选项卡和静态选项卡,鼠标滑过标签显示对应模块,其他模块隐藏,鼠标点击标签显示应模块,其他模块隐藏,适用于一般网站的内容比较丰富的展示表现方式。

代码结构

1. 引入JS

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

2. HTML代码

	<div class="demopage">
		<h2>ajax 选项卡</h2>
		<div class="tabbox" id="ajaxtab">
			<ul class="tabbtn">
				<li class="current"><a href="jquery.html">jquery 特效</a></li>
				<li><a href="js.html">javascript 特效</a></li>
				<li><a href="divcss.html">div+css 教程</a></li>
				<li><a href="html5.html">HTML5 特效</a></li>
			</ul><!--tabbtn end-->
			<div class="loading"><img src="images/loading.gif" width="40" height="40" alt="页面加载" /></div>
			<div class="tabcon"></div><!--tabcon end-->
		</div><!--tabbox end-->
		<h2>静态 选项卡 滑过事件</h2>
		<div class="tabbox" id="statetab">
			<ul class="tabbtn">
				<li class="current"><a href="http://www.17sucai.com/">jquery 特效</a></li>
				<li><a href="http://www.17sucai.com/">javascript 特效</a></li>
				<li><a href="http://www.17sucai.com/">div+css 教程</a></li>
				<li><a href="http://www.17sucai.com/">HTML5 特效</a></li>
			</ul><!--tabbtn end-->
			<div class="tabcon">
				<ul>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 图片特效插件 异步读取图片TOP排行榜特效">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换">jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="tabcon">
				<ul>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="tabcon">
				<ul>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
					<li><span>▪</span><a href="http://www.17sucai.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.17sucai.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="用div+css制作一个CSS3的泡泡动画按钮非常漂亮">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="tabcon">
				<ul>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
				</ul>
			</div><!--tabcon end-->
		</div><!--tabbox end-->
		<h2>静态 选项卡 点击事件</h2>
		<div class="tabbox" id="clicktab">
			<ul class="tabbtn">
				<li class="current"><span>jquery 特效</span></li>
				<li><span>javascript 特效</span></li>
				<li><span>div+css 教程</span></li>
				<li><span>HTML5 特效</span></li>
			</ul><!--tabbtn end-->
			<div class="tabcon">
				<ul>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 图片特效插件 异步读取图片TOP排行榜特效">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换">jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="tabcon">
				<ul>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="tabcon">
				<ul>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
					<li><span>▪</span><a href="http://www.17sucai.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.17sucai.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="用div+css制作一个CSS3的泡泡动画按钮非常漂亮">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="tabcon">
				<ul>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
					<li><span>▪</span><a href="http://www.17sucai.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
				</ul>
			</div><!--tabcon end-->
		</div><!--tabbox end-->
	</div><!--demopage end-->
<script type="text/javascript">
//ajax 选项卡
$('#ajaxtab .tabbtn li a').click(function(){
	var thiscity = $(this).attr("href");
	$("#ajaxtab .loading").ajaxStart(function(){
		$(this).show();
	}); 
	$("#ajaxtab .loading").ajaxStop(function(){
		$(this).hide();
	}); 
	$('#ajaxtab .tabcon').load(thiscity);
	$('#ajaxtab .tabbtn li a').parents().removeClass("current");
	$(this).parents().addClass("current");
	return false;
});
$('#ajaxtab .tabbtn li a').eq(0).trigger("click");
//tab plugins 插件
$(function(){
	//选项卡鼠标滑过事件
	$('#statetab .tabbtn li').mouseover(function(){
		TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this))
	});
	$('#statetab .tabbtn li').eq(0).trigger("mouseover");
	//选项卡鼠标滑过事件
	$('#clicktab .tabbtn li').click(function(){
		TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this))
	});
	$('#clicktab .tabbtn li').eq(0).trigger("click");
	function TabSelect(tab,con,addClass,obj){
		var $_self = obj;
		var $_nav = $(tab);
		$_nav.removeClass(addClass),
		$_self.addClass(addClass);
		var $_index = $_nav.index($_self);
		var $_con = $(con);
		$_con.hide(),
		$_con.eq($_index).show();
	}
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 文字切换 文字选项卡 选项卡自动切换 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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