您的位置：首页 > Web前端 > JQuery

jquery 淡入淡出tab 选项卡效果

2013-09-05 20:23 796 查看

下面提供一款jquery 淡入淡出tab 选项卡效果代码，本文章不提供jquery文件，你可以到google或down.php100.com下载jquery-1.4.2.min.js文件。下面提供一款jquery 淡入淡出tab 选项卡效果代码，本文章不提供jquery文件，你可以到google或down.php100.com下载jquery-1.4.2.min.网页特效文件。
<!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>简洁实用的淡入淡出选项卡菜单</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/网页特效" src="/jquery-1.4.2.min.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>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>

<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>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航