jquery tab選項卡 ajax選項卡 靜態選項卡 鼠標點擊選項卡 鼠標滑過選項卡



112 447 150



特效描述: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

加群請備注:從官網了解到

老夫子电子