jq滑动门事件--案例
滑动门事件在大大小小的页面都会遇到,今天在切社区页面的时候遇到,特整理下来:
分为3部分,css部分和jq和html部分
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:235px; 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;width: 116px;}
.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%;}
HTML部分
<div id="tabbox"> <ul class="tabs" id="tabs"> <li><a href="http://www.51xuediannao.com/js/nav/" tab="tab1">导航菜单</a></li> <li><a href="http://www.51xuediannao.com/js/slide/" tab="tab2">焦点幻灯片</a></li> </ul> <ul class="tab_conbox"> <li id="tab1" class="tab_con"> <p><span><a href="http://www.51xuediannao.com/">懒人建站1</a>只收录实用和能提高用户体验的代码</span><br /> <span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p> </li> <li id="tab2" class="tab_con"> <p><span><a href="http://www.51xuediannao.com/">懒人建站2</a>只收录实用和能提高用户体验的代码</span><br /> <span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p> </li> </ul> </div>
jq部分
<script src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { jQuery.jqtab = function(tabtit,tabcon) { $(tabcon).hide(); $(tabtit+" li:first").addClass("thistab").show(); $(tabcon+":first").show(); $(tabtit+" li").hover(function() { $(tabtit+" li").removeClass("thistab"); $(this).addClass("thistab"); $(tabcon).hide(); var activeTab = $(this).find("a").attr("tab"); $("#"+activeTab).fadeIn(); return false; },function(){ }); }; /*调用方法如下:*/ $.jqtab("#tabs",".tab_con"); }); </script>
完整的代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动门事件</title> <meta name="keywords" content="" /> <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:235px; 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;width: 116px;} .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 src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { jQuery.jqtab = function(tabtit,tabcon) { $(tabcon).hide(); $(tabtit+" li:first").addClass("thistab").show(); $(tabcon+":first").show(); $(tabtit+" li").hover(function() { $(tabtit+" li").removeClass("thistab"); $(this).addClass("thistab"); $(tabcon).hide(); var activeTab = $(this).find("a").attr("tab"); $("#"+activeTab).fadeIn(); return false; },function(){ }); }; /*调用方法如下:*/ $.jqtab("#tabs",".tab_con"); }); </script> </head> <body> <div id="tabbox"> <ul class="tabs" id="tabs"> <li><a href="http://www.51xuediannao.com/js/nav/" tab="tab1">导航菜单</a></li> <li><a href="http://www.51xuediannao.com/js/slide/" tab="tab2">焦点幻灯片</a></li> </ul> <ul class="tab_conbox"> <li id="tab1" class="tab_con"> <p><span><a href="http://www.51xuediannao.com/">懒人建站1</a>只收录实用和能提高用户体验的代码</span><br /> <span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p> </li> <li id="tab2" class="tab_con"> <p><span><a href="http://www.51xuediannao.com/">懒人建站2</a>只收录实用和能提高用户体验的代码</span><br /> <span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span></p> </li> </ul> </div> </body> </html>
以后就可以直接拷贝这个代码了,大家有什么需要的,共同学习!!!