美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

一款简易的jquery滑动门

Jquery mihoweb 2269℃ 0评论

很多时候我们在网页中要用到滑动门效果,有时只需要jquery的,jquery还是不错的,最少的代码,干最多的事!其实很多时候我们只是需一丢丢代码就可以弄出自己中意的东东来,少说话,多帖码!

Code   ViewCopyPrint
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
  5. <title>代码简洁的滑动门</title>
  6. <meta name=”keywords” content=”jquery滑动门特效” />
  7. <meta name=”description” content=”美浩工作室,网站建设网站设计,网站seo” />
  8. <style type=”text/css”>
  9. body,ul,li{margin: 0;padding: 0;font: 12px normal “宋体”, Arial, Helvetica, sans-serif;list-style: none;}
  10. a{text-decoration: none;color: #000;font-size: 14px;}
  11. #tabbox{ width:600px; overflow:hidden; margin:0 auto;}
  12. .tab_conbox{border: 1px solid #999;border-top: none;}
  13. .tab_con{ display:none;}
  14. .tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
  15. .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;}
  16. .tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
  17. .tabs li a:hover {background: #ccc;}
  18. .tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}
  19. .tab_con {padding:12px;font-size: 14px; line-height:175%;}
  20. </style>
  21. <script src=”jquery.min.js” type=”text/javascript”></script>
  22. <script type=”text/javascript”>
  23. $(document).ready(function() {
  24.     jQuery.jqtab = function(tabtit,tabcon) {
  25.         $(tabcon).hide();
  26.         $(tabtit+” li:first”).addClass(“thistab”).show();
  27.         $(tabcon+”:first”).show();
  28.         $(tabtit+” li”).click(function() {
  29.             $(tabtit+” li”).removeClass(“thistab”);
  30.             $(this).addClass(“thistab”);
  31.             $(tabcon).hide();
  32.             var activeTab = $(this).find(“a”).attr(“tab”);
  33.             $(“#”+activeTab).fadeIn();
  34.             return false;
  35.         });
  36.     };
  37.     /*调用方法如下:*/
  38.     $.jqtab(“#tabs”,”.tab_con”);
  39. });
  40. </script>
  41. </head>
  42. <body>
  43. <div id=”tabbox”>
  44.     <ul class=”tabs” id=”tabs”>
  45.        <li><a href=”http://www.mihoweb.com” tab=”tab1″>美浩工作室</a></li>
  46.        <li><a href=”http://www.mihoweb.com” tab=”tab2″>美浩工作室</a></li>
  47.        <li><a href=”http://www.mihoweb.com” tab=”tab3″>美浩工作室</a></li>
  48.        <li><a href=”http://www.mihoweb.com” tab=”tab4″>美浩工作室</a></li>
  49.     </ul>
  50.     <ul class=”tab_conbox”>
  51.         <li id=”tab1″ class=”tab_con”>
  52.            <p><span><a href=”http://www.51xuediannao.com/”>美浩工作室</a>网站建设</span><br /></p>
  53.         </li>
  54.         <li id=”tab2″ class=”tab_con”>
  55.             <p><span><a href=”http://www.51xuediannao.com/”>美浩工作室</a>网站设计</span><br /></p>
  56.         </li>
  57.         <li id=”tab3″ class=”tab_con”>
  58.             <p><span><a href=”http://www.51xuediannao.com/”>美浩工作室</a>广告设计</span><br /></p>
  59.         </li>
  60.         <li id=”tab4″ class=”tab_con”>
  61.             <p><span><a href=”http://www.51xuediannao.com/”>美浩工作室</a>网站SEO</span><br /></p>
  62.         </li>
  63.     </ul>
  64. </div>
  65. <p>代码简洁的滑动门(tab)jquery插件调用方法:”#tabs”,”.tab_con” 这里的#tabs是jquery选项卡的链接按钮的外层ID,.tab_con是要显示的的内容类名。只要注意这两个地方调用就不会错。一个页面可以多次使用。
  66. </p>
  67. </body>
  68. </html>

火速下载

如果您喜欢这篇文章,欢迎分享订阅。

Incoming search terms:

  • jquery 滑动门
  • jquery滑动门
  • jquery jqtab
  • jqtab
  • $ jqtab

转载请注明:美浩工作室官方博客 » 一款简易的jquery滑动门

喜欢 (0)