1500字范文 > 简洁jQuery滑动门插件

简洁jQuery滑动门插件

时间：2022-01-07 05:48:52

相关推荐

简洁jQuery滑动门插件

独角兽企业重金招聘Python工程师标准>>>

滑动门,就是传说中的多tab显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>简洁jQuery滑动门插件 - 懒人建站</title><meta name="keywords" content="jquery特效,JS代码,js特效代码大全,导航菜单代码,焦点幻灯片,企业网页设计欣赏" /><meta name="description" content="懒人建站为您提供-基于jquery特效，jquery弹出层效果，js特效代码大全，JS广告代码，导航菜单代码，下拉菜单代码和jquery焦点图片代码。" />[url]/upload/attachment/0072/4389/a0fb8e9d-4279-324d-a3a4-8716c7c48e12.jpg[/url]<style type="text/css">body,ul,li{margin: 0;padding: 0;font: 12px normal "宋体", Arial, Helvetica, sans-serif;list-style: none;}a{text-decoration: none;color: #000;font-size: 14px;}#tabbox{ width:600px; overflow:hidden; margin:0 auto;}.tab_conbox{border: 1px solid #999;border-top: none;}.tab_con{ display:none;}.tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}.tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}.tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}.tabs li a:hover {background: #ccc;}.tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}.tab_con {padding:12px;font-size: 14px; line-height:175%;}</style><script type="text/javascript" src="./jquery-1.8.0.js"></script><script type="text/javascript">$(document).ready(function() {jQuery.jqtab = function(tabtit,tab_conbox,shijian) {$(tab_conbox).find("li").hide();$(tabtit).find("li:first").addClass("thistab").show(); $(tab_conbox).find("li:first").show();$(tabtit).find("li").bind(shijian,function(){$(this).addClass("thistab").siblings("li").removeClass("thistab"); var activeindex = $(tabtit).find("li").index(this);$(tab_conbox).children().eq(activeindex).show().siblings().hide();return false;});};/*调用方法如下：*/$.jqtab("#tabs","#tab_conbox","click");$.jqtab("#tabs2","#tab_conbox2","mouseenter");});</script></head><body><div id="tabbox"><h1>简洁jQuery滑动门插件单击切换演示</h1><ul class="tabs" id="tabs"><li><a href="/js/nav/">导航菜单</a></li><li><a href="/js/slide/">焦点幻灯片</a></li><li><a href="/js/gg/">广告代码</a></li><li><a href="/js/texiao/">网页特效</a></li></ul><ul class="tab_conbox" id="tab_conbox"><li class="tab_con"><p>1<span><a href="/">懒人建站</a>只收录实用和能提高用户体验的代码</span><br /><span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span></p></li><li class="tab_con"><p>2<span><a href="/">懒人建站</a>2只收录实用和能提高用户体验的代码</span><br /><span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span></p></li><li class="tab_con"><p>3<span><a href="/">懒人建站</a>3只收录实用和能提高用户体验的代码</span><br /><span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span></p></li><li class="tab_con"><p>4<span><a href="/">懒人建站</a>4只收录实用和能提高用户体验的代码</span><br /><span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span></p></li></ul><h1>简洁jQuery滑动门插件鼠标滑过切换演示</h1><ul class="tabs" id="tabs2"><li><a href="/js/nav/">导航菜单</a></li><li><a href="/js/slide/">焦点幻灯片</a></li><li><a href="/js/gg/">广告代码</a></li><li><a href="/js/texiao/">网页特效</a></li></ul><ul class="tab_conbox" id="tab_conbox2"><li class="tab_con"><p>1<span><a href="/">懒人建站</a>只收录实用和能提高用户体验的代码</span><br /><span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span></p></li><li class="tab_con"><p>2<span><a href="/">懒人建站</a>2只收录实用和能提高用户体验的代码</span><br /><span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span></p></li><li class="tab_con"><p>3<span><a href="/">懒人建站</a>3只收录实用和能提高用户体验的代码</span><br /><span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span></p></li><li class="tab_con"><p>4<span><a href="/">懒人建站</a>4只收录实用和能提高用户体验的代码</span><br /><span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span></p></li></ul></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。