零分杂记

一款不错的JQ渐显渐隐代码

JS代码：

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#table span').hover(function() {
$(this).addClass("on").siblings().removeClass("on");
$("#tab-content > div").eq($('#table span').index(this)).fadeIn(500).siblings().fadeOut(500);
});
});
</script>

鼠标移过切换，换点击，将hover换成click即可。 fadeIn(500)，渐显，500是时间，ms!

CSS：

<style>
.table{width:320px;height:248px;overflow:hidden;margin:0 0 0 8px;border:1px solid #E6E6E6;}
.table .title{width:320px;height:28px;overflow:hidden;border-bottom:1px solid #E6E6E6;}
.table .title .one{width:160px;height:30px;line-height:30px;font-size:14px;overflow:hidden;margin:0;text-align:center;display:block;cursor:pointer}
.table .title .on{background-color:#FF5400;color:#fff;}
.table .box{width:300px;height:200px;overflow:hidden;padding:8px 10px;display:block;position:absolute;}
.table .box .li{background:url("li-style.png") 0 0 no-repeat;width:300px;height:200px;}
.table .box .li a{display:block;width:275px;height:20px;line-height:20px;margin-left:25px; overflow:hidden; whitewhite-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;color:#666;}
.f_l{float:left;}
</style>

CSS样式，这里注意box要给一个 position:absolute ，层进行叠加，否则切换的时候有明显的弹出效果！

html代码：

<div class="table" id="table">
<div class="title" id="fli">
<span class="one f_l on" >TAB选项卡1</span>
<span class="one f_l">TAB选项卡2</span>
</div>
<div id="tab-content">
<div class="box">
<div class="li">
<a href="//blog.32xp.com/phpstudy-mysql-450.html" title="PHPstudy搭建本地环境修改数据库上传大小" target="_blank">PHPstudy搭建本地环境修改数据库上传大小</a>
<a href="//blog.32xp.com/js-href-447.html" title="JS，JQ获取淘点金里的淘客链接href值" target="_blank">JS，JQ获取淘点金里的淘客链接href值</a>
<a href="//blog.32xp.com/adjs-445.html" title="淘点金JS被浏览器广告过滤屏蔽" target="_blank">淘点金JS被浏览器广告过滤屏蔽</a>
<a href="//blog.32xp.com/meiguorenapp-443.html" title="美国人每天玩手机APP时间首次超过看电视" target="_blank">美国人每天玩手机APP时间首次超过看电视</a>
<a href="//blog.32xp.com/wordpress-441.html" title="外站调用wordpress文章" target="_blank">外站调用wordpress文章</a>
<a href="//blog.32xp.com/wordpress-437.html" title="解决wordpress4.2以上外观菜单无法打开显示选项" target="_blank">解决wordpress4.2以上外观菜单无法打开显示选项</a>
<a href="//blog.32xp.com/php-435.html" title="PHP替换字符串preg_replace和str_replace的区别" target="_blank">PHP替换字符串preg_replace和str_replace的区别</a>
<a href="//blog.32xp.com/iphone6s-433.html" title="9月10日凌晨1点直播苹果发布会 6s全面曝光" target="_blank">9月10日凌晨1点直播苹果发布会 6s全面曝光</a>
<a href="//blog.32xp.com/jscode-431.html" title="JS+html点击运行文本框内代码" target="_blank">JS+html点击运行文本框内代码</a>
<a href="//blog.32xp.com/html5-video-427.html" title="html5音视频播放标签video" target="_blank">html5音视频播放标签video</a>
</div>
</div>
<div class="box" style="display:none;">
<div class="li">
<a href="//blog.32xp.com/adjs-445.html" title="淘点金JS被浏览器广告过滤屏蔽" target="_blank">淘点金JS被浏览器广告过滤屏蔽</a>
<a href="//blog.32xp.com/meiguorenapp-443.html" title="美国人每天玩手机APP时间首次超过看电视" target="_blank">美国人每天玩手机APP时间首次超过看电视</a>
<a href="//blog.32xp.com/wordpress-441.html" title="外站调用wordpress文章" target="_blank">外站调用wordpress文章</a>
<a href="//blog.32xp.com/wordpress-437.html" title="解决wordpress4.2以上外观菜单无法打开显示选项" target="_blank">解决wordpress4.2以上外观菜单无法打开显示选项</a>
<a href="//blog.32xp.com/php-435.html" title="PHP替换字符串preg_replace和str_replace的区别" target="_blank">PHP替换字符串preg_replace和str_replace的区别</a>
<a href="//blog.32xp.com/iphone6s-433.html" title="9月10日凌晨1点直播苹果发布会 6s全面曝光" target="_blank">9月10日凌晨1点直播苹果发布会 6s全面曝光</a>
<a href="//blog.32xp.com/jscode-431.html" title="JS+html点击运行文本框内代码" target="_blank">JS+html点击运行文本框内代码</a>
<a href="//blog.32xp.com/html5-video-427.html" title="html5音视频播放标签video" target="_blank">html5音视频播放标签video</a>
<a href="//blog.32xp.com/phpstudy-mysql-450.html" title="PHPstudy搭建本地环境修改数据库上传大小" target="_blank">PHPstudy搭建本地环境修改数据库上传大小</a>
<a href="//blog.32xp.com/js-href-447.html" title="JS，JQ获取淘点金里的淘客链接href值" target="_blank">JS，JQ获取淘点金里的淘客链接href值</a>
</div>
</div>
</div>
</div>