jQuery TAB淡入淡出的选项卡菜单

2024-09-05 12:20:40

字体：大中小

来源：转载

供稿：网友

淡入淡出的Tab选项卡菜单，基于jQuery1.3.2类库，当用鼠标点击某个选项卡的时候，对应的内容渐渐出现，有种缓冲的感觉，这样人的眼睛更容易接受，可有效提升网站用户体验，也为网站增加一点动感元素。

<!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 class="tabin">选项卡1</li>	<li>选项卡2</li>	<li>选项卡3</li></ul><div id="tab_box">	<div class="contentin contentfirst">选项卡1的内容</div>	<div class="contentfirst">选项卡2的内容</div>	<div class="contentfirst">选项卡3的内容</div></div><br>初次打开，如果左下角出现错误提示，请刷新一下页面就正常了，正常使用时不会出现此现象。</body></html>

上一篇：强制点击广告的Js代码

下一篇：适合于后台使用的动画折叠菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注