当前位置:首页» 标签table切换文章
零分 2015.09.17 代码 , , 3,281 读 0 评
一款不错的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=“http://blog.32xp.com/phpstudy-mysql-450.html” title=“PHPstudy搭建本地环境修改数据库上传大小” target=“_blank”>PHPstudy搭建本地环境修改数据库上传大小</a> <a href=“http://blog.32xp.com/js-href-447.html” title=“JS,JQ获取淘点金里的淘客链接href值” target=“_blank”>JS,JQ获取淘点金里的淘客链接href值</a> <a href=“http://blog.32xp.com/adjs-445.html” title=“淘点金JS被浏览器广告过滤屏蔽” target=“_blank”>淘点金JS被浏览器广告过滤屏蔽</a> <a href=“http://blog.32xp.com/meiguorenapp-443.html” title=“美国人每天玩手机APP时间首次超过看电视” target=“_blank”>美国人每天玩手机APP时间首次超过看电视</a> <a href=“http://blog.32xp.com/wordpress-441.html” title=“外站调用wordpress文章” target=“_blank”>外站调用wordpress文章</a> <a href=“http://blog.32xp.com/wordpress-437.html” title=“解决wordpress4.2以上外观菜单无法打开显示选项” target=“_blank”>解决wordpress4.2以上外观菜单无法打开显示选项</a> <a href=“http://blog.32xp.com/php-435.html” title=“PHP替换字符串preg_replace和str_replace的区别” target=“_blank”>PHP替换字符串preg_replace和str_replace的区别</a> <a href=“http://blog.32xp.com/iphone6s-433.html” title=“9月10日凌晨1点直播苹果发布会 6s全面曝光” target=“_blank”>9月10日凌晨1点直播苹果发布会 6s全面曝光</a> <a href=“http://blog.32xp.com/jscode-431.html” title=“JS+html点击运行文本框内代码” target=“_blank”>JS+html点击运行文本框内代码</a> <a href=“http://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=“http://blog.32xp.com/adjs-445.html” title=“淘点金JS被浏览器广告过滤屏蔽” target=“_blank”>淘点金JS被浏览器广告过滤屏蔽</a> <a href=“http://blog.32xp.com/meiguorenapp-443.html” title=“美国人每天玩手机APP时间首次超过看电视” target=“_blank”>美国人每天玩手机APP时间首次超过看电视</a> <a href=“http://blog.32xp.com/wordpress-441.html” title=“外站调用wordpress文章” target=“_blank”>外站调用wordpress文章</a> <a href=“http://blog.32xp.com/wordpress-437.html” title=“解决wordpress4.2以上外观菜单无法打开显示选项” target=“_blank”>解决wordpress4.2以上外观菜单无法打开显示选项</a> <a href=“http://blog.32xp.com/php-435.html” title=“PHP替换字符串preg_replace和str_replace的区别” target=“_blank”>PHP替换字符串preg_replace和str_replace的区别</a> <a href=“http://blog.32xp.com/iphone6s-433.html” title=“9月10日凌晨1点直播苹果发布会 6s全面曝光” target=“_blank”>9月10日凌晨1点直播苹果发布会 6s全面曝光</a> <a href=“http://blog.32xp.com/jscode-431.html” title=“JS+html点击运行文本框内代码” target=“_blank”>JS+html点击运行文本框内代码</a> <a href=“http://blog.32xp.com/html5-video-427.html” title=“html5音视频播放标签video” target=“_blank”>html5音视频播放标签video</a> <a href=“http://blog.32xp.com/phpstudy-mysql-450.html” title=“PHPstudy搭建本地环境修改数据库上传大小” target=“_blank”>PHPstudy搭建本地环境修改数据库上传大小</a> <a href=“http://blog.32xp.com/js-href-447.html” title=“JS,JQ获取淘点金里的淘客链接href值” target=“_blank”>JS,JQ获取淘点金里的淘客链接href值</a> </div> </div> </div> </div> 数据比较多,html代码比较长! 演示及下载:http://demo.32xp.com/demo/jstab/20150917001.html    
零分 2015.04.02 代码 , 1,517 读 0 评
JS选项卡切换,其实,说穿了就是JS来控制选项卡的CSS样式,和内容DIV的显示和隐藏,我的代码都是比较随意,希望能比较好理解。 JS代码: <script language=javascript>    function check(n){    var c=document.getElementById(“div”).getElementsByTagName(“span”).length;    var v=document.getElementById(“div”).getElementsByTagName(“span”);    for(i=0;i<c;i++){    v[i].className=“”;    document.getElementById(“t”+i).style.display=“none”;    }    v[n].className=“check”;    document.getElementById(“t”+n).style.display=“block”;    }    </script>   CSS: <style>          .div{width:500px;margin:10px auto;border:1px solid #666}          .div .nav{width:500px;height:20px;margin:0px;border-bottom:1px solid #666}          .div .nav span{width:100px;height:20px;margin:0;line-height:20px;float:left;display:block;border-right:1px solid #666;background-color: #fff;text-align:center;cursor:pointer}          .div .nav .check{height:21px;margin-top:-2px;border-top:2px solid #ff0000;background-color: #fff;}          .content{margin:10px;height:50px;width:500px;display:block;}          .clear{clear:both; float:none;}      </style>   HTML: <div id=“div” class=“div”>        <div class=“nav”>     <span class=“check”  onclick=“check(0)”>选项卡1</span>             <span onclick=“check(1)”>选项卡2</span>             <span onclick=“check(2)”>选项卡3</span>             <span onclick=“check(3)”>选项卡4</span>    <div class=“clear”></div>                </div>    <div class=“content”>    <div  id=“t0” style=“display:block”>选项卡1的内容</div>    <div  id=“t1” style=“display:none”>选项卡2的内容</div>    <div  id=“t2” style=“display:none”>选项卡3的内容</div>    <div  id=“t3” style=“display:none”>选项卡4的内容</div>        </div>    </div>   演示:http://2.jspintu.sinaapp.com/dome/jsTable/
TOP