大米CMS官网论坛,大米站长联盟,大米站长之家,大米开发者社区

 找回密码
 注册大米会员

QQ登录

只需一步,快速开始

查看: 1151|回复: 1

jquery写的一个tab切换插件

[复制链接]

366

主题

625

帖子

5078

积分

超级版主

Rank: 8Rank: 8

积分
5078

授权用户

发表于 2017-3-22 23:52:54 | 显示全部楼层 |阅读模式
  1. <!--tab切换图集-->
  2. <style type="text/css">
  3. .tab_nav{
  4. width:100%;
  5.   overflow: hidden
  6. }
  7. .tab_nav li {
  8.   float: left;
  9.   list-style: none;
  10.   margin-right: 10px;
  11.   cursor: pointer;
  12.   padding: 2px 30px 2px 0px!important;
  13.   
  14. }
  15. .link {
  16.   cursor: pointer;
  17.   color: #F00
  18. }

  19. .tab_div div {
  20.   display: none;
  21.   padding: 10px;
  22. }
  23. .tab_div {
  24.   text-align: left;
  25.   border: 1px #CCC solid;
  26.   clear: both;
  27.   margin-bottom:10px;
  28. }
  29. .cur {
  30.   background: #000;
  31.   color: #FFF
  32. }
  33. </style>
  34. <script type="text/javascript">
  35. $(document).ready(function() {
  36.   //tab
  37.     $("#setTab").setTab();
  38.         try {
  39.         $('.fancybox').fancybox();
  40.     }
  41.     catch(ex) {}
  42.    
  43. });
  44.   
  45. /*插件代码*/
  46. (function ($) {
  47.   $.fn.setTab = function () {
  48.     var getTab=$(this),//this指向调用函数的ID
  49.       panels = getTab.children("div.tab_div").children("div"),
  50.       tabs = getTab.find("li");
  51.   
  52.     return this.each(function(){
  53.       $(tabs).click(function(e) {
  54.         var index = $.inArray(this, $(this).parent().find("li"));//this指向li
  55.         if (panels.eq(index)[0]) {
  56.           $(tabs).removeClass("cur");
  57.           $(this).addClass("cur");
  58.           panels.css("display", "none").eq(index).css("display", "block");
  59.         }
  60.       });
  61.         
  62.     });
  63. }
  64. })(jQuery);
  65.   
  66.   
  67. </script>
  68. <div id="setTab">
  69. <ul class="tab_nav">
  70.   <li class="cur">{$article.title}的图集</li>
  71.   <li>{$article.title}的视频</li>
  72.   <li>{$article.title}的文集</li>
  73. </ul>
  74. <div class="tab_div">
  75.   <div style="display: block" class="che">
  76.   
  77.   {$article.teacher_pic}

  78.   </div>
  79.   <div>{$article.teacher_video}</div>
  80.   <div>
  81. {$article.teacher_wenji}
  82.   </div>
  83. </div>
  84. </div>
  85. </div>
复制代码


回复

使用道具 举报

0

主题

93

帖子

242

积分

禁止发言

积分
242
发表于 2017-3-27 10:39:42 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册大米会员

本版积分规则

QQ|小黑屋|大米CMS社区 ( 蜀ICP备11002200号-2广告联系:广告联系 

Powered by 大米CMS

© 2010-2020 大米CMS Inc.

快速回复 返回顶部 返回列表