jQuery TAB淡入淡出的選項卡菜單

2024-09-05 12:20:40

字體：大中小

供稿：網(wǎng)友

淡入淡出的Tab選項卡菜單，基于jQuery1.3.2類庫，當(dāng)用鼠標點擊某個選項卡的時候，對應(yīng)的內(nèi)容漸漸出現(xiàn)，有種緩沖的感覺，這樣人的眼睛更容易接受，可有效提升網(wǎng)站用戶體驗，也為網(wǎng)站增加一點動感元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>淡入淡出的TAB選項卡菜單</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">ul,li{margin:0;padding:0;list-style:none;}#tabfirst li{float:left;background-color:#868686;color:white;padding:5px;margin-right:2px;border:1px solid white;}#tabfirst li.tabin{background-color:#6E6E6E;border:1px solid #6E6E6E;}.contentfirst{clear:left;background-color:#6E6E6E;color:white;width:300px;height:100px;padding:10px;display:none;}.contentin{display:block;}</style><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script><script type="text/javascript"> $(function(){ 	var _tab=$('ul#tabfirst>li');	var _con=$('div#tab_box>div');	var _conthis;	var _index=0;		_tab.click(function(){		_index=_tab.index(this);		$(this).addClass('tabin').siblings().removeClass('tabin');		_con.filter(':visible').stop(true,true).fadeOut(200,function(){			_con.eq(_index).fadeIn(200)		})	});})</script></head><body><ul id="tabfirst">	<li id="70qarhlowxag"    class="tabin">選項卡1</li>	<li>選項卡2</li>	<li>選項卡3</li></ul><div   class="70qarhlowxag"   id="tab_box">	<div   id="70qarhlowxag"   class="contentin contentfirst">選項卡1的內(nèi)容</div>	<div   id="70qarhlowxag"   class="contentfirst">選項卡2的內(nèi)容</div>	<div   id="70qarhlowxag"   class="contentfirst">選項卡3的內(nèi)容</div></div><br>初次打開，如果左下角出現(xiàn)錯誤提示，請刷新一下頁面就正常了，正常使用時不會出現(xiàn)此現(xiàn)象。</body></html>

上一篇：強制點擊廣告的Js代碼

下一篇：適合于后臺使用的動畫折疊菜單