我的资料站



网站首页



开发框架





[HTML/CSS/JQUERY]JQUERY插件之TAB选项卡栏目开通 [帆软]JavaScript获取CPT文件上传服务器后的地址并做后续处理 [数据库]使用时间函数查询时候不走索引的解决方案 [PHP]正则修饰符 [FDL]FineDataLink来源表数据字段太多自动建表失败的解决办法 [帆软]决策报表中TAB切换实现不同的页面停留不同的秒数 [PHP]判断客户端是手机平板还是PC端 [PYTHON]Python生成词图云 [PYTHON]利用Python爬取本站的最新消息 [流程]流程类/签署类设计技巧 [PHP]利用正则把宝信MAP类的电文转成JSON [DB2]2个数字字段相除报错解决方案本站全文检索的方法 [KETTLE]实现附件或者文件同步/网站同步 [DB2]把一张表放到另外一张表的右侧/连接到右侧 [MYSQL]累计和每一天的数据互相转换 [帆软]前台常用写法 [MYSQL]ERROR 1045 (28000)解决: [DB2]查询字符串的字段UNION数字字段报错解决 [帆软]自定义弹窗事件 [MYSQL]某个字段按照数字排序 [DB2]添加主键及索引 [DB2]按照一个日期求本周及下周 [MYSQL]求按照一个日期求本周及下周 [MYSQL]查询指定日期的数据，没有的话日期按照最新日期计算 [MYSQL]累计和每一天的数据互相转换 [MYSQL]8版本以下实现窗口函数(排名,组内排名,分组取前几名) [KETTLE]下MYSQL插入数据太慢 [DB2]更新小数位数,统一小数位数 [DB2]查看表的结构 [MYSQL]查看表结构 [DB2]获取期间内所有日期 [DB2]自动更新时间,用来判断数据有没有修改 [DB2]时间操作函数 [MYSQL]时间操作函数 [PHP]匹配中文字符串的正则表达式 [DB2]统一处理小数位的长度 [DB2]查看表结构 [VUE]NODE SASS COULD NOT FIND A BINDING FOR YOUR CURRENT ENVIRONMENT: WINDOWS 64-BIT WITH NODE.JS 12 [PHP]把用=等连接的非正式JSON字符创转成正规JSON或者数组 [百度网盘]网盘一直提示努力加载中，请稍后 [数据库/帆软]以最大行补齐数据的行，数据以最长的行对齐 [数据库/帆软]以最大行补齐数据的行，数据以最长的行对齐 [JQUERY]右侧滚动左侧固定在某个位置，当右侧滚动到一定程度左侧跟着滚动 [帝国CMS]封面调用栏目的缩略图 [帝国CMS]数据字典列表 [HTML/CSS/JQUERY]JQUERY插件之TAB选项卡 [PHP/HTML/JS]防止重复提交的方法 [PHP/HTML/JS]防止重复提交的方法 [HTML/数据库]富文本编辑器复制进去的文本在修改的时候无法换行处理 [FILEZILLA]搭建FTP服务 [PHP]图片相似度比较类 [PHP]图片相似度比较类判断2个时间段是否有交集判断2个时间段是否有交集 PHP连接数据库中文表名 MEDOO连接MSSQL [JS]解决H5移动端阻止缩放 [JS]解决H5移动端阻止缩放 [JQUERY]BODY的ONSCROLL不管用的解决办法 [JQUERY]移除内联样式重置表格样式 [JAVA]正则检测是否含有某个字符串 [JAVA]从URL地址下载附件传到另外一台服务器上 [数据库]获取行号 [DB2]报错NOT ALLOWED FOR REASON CODE "7" ON TABLE XXX 流程类/签署类设计技巧 [通用]数据分页查询优化 [DB2]查询某天及累计到当天的数据 [MYSQL]获取一个日期的天数 [数据库]在一个小于10的数字前面补零 APACHE 网站相关配置 [CSS]单行或者多行文本超出显示省略号 [JQUERY]只能输入数字并且限定最大值百度获取假日的接口地址 NAVICAT常用操作 [HTML]富文本编辑器传送的文本入库后显示不正常或者导出PDF不正常 U函数根据当前的请求参数再附加额外的请求参数自动生成新的URL 获取文件内容 [JS]JSON替换健的名称 CURL上传或者移动附件文件生产PDF并下载发送XML到JAVA的WEBSERVICE接口 JAVA浏览器客户端提示禁止连接 MSSQL常用SQL语句审批批件之类的的自动流转的设计 MYSQL三字段形式统计百分比(占比等) MYSQL删除超过3个月的数据 MYSQL根据情况没有当天的查询前一天的数据 [JS]常用字符串处理方法 [CSS]区分手机是横屏竖屏写不同样式 [JS]解决H5移动端阻止缩放赵丽颖王鸥迪丽热巴李沁吴倩胡歌蔡徐坤吴亦凡黄子韬陈赫 SUPERJUNIOR SUPERJUNIOR SUPERJUNIOR SUPERJUNIOR SUPERJUNIOR 鹿晗鹿晗鹿晗鹿晗鹿晗邓超邓超邓超邓超邓超宝儿宝儿宝儿宝儿宝儿童谣胡静美女杨蓉旋转小彩旗 [JS]获取滚动条的宽度 PS制作SHADOW之类的凸起效果方法格式化前台富文本编辑器传递的格式产生A-BB类的数组判断一个一维数组在不在另一个二维数组中数组根据某个字段分类查看自己的电脑被远程桌面连接的记录获取某个日期的第一天和最后一天以及那一周的某一天 [JQUERY]关于AJAX的缓存问题 PHPEXCEL 中文手册 PHP 把运算符连接的字符串做运算 EXCEL转HTML 获取某天的首末时间戳一种用配置文件实现的权限思路 [JS]根据年和月创建日历 [JS]获取某年某月(某个日期)有几天 PHP中常用的函数将一个字符串倒向输出 [HTML]HTML5 VIDEO 视频标签介绍与使用移动端WEB开发的一些技巧 [JS]时间戳格式化成时间 [JQUERY]把HTML转换成代码修饰样式左侧栏目导航添加当前选择的样式作特别处理 [JQUERY+PHP]外网根据域名或者IP判断需要登录以后才能访问 [HTML/CSS/JQUERY]动态效果的导航条对查询到的关键字进行高亮处理 [CSS]纯CSS实现的漂亮菜单条找出填空题所填的字符串 URL重写以后访问存在的路劲却报错 SUBLIME配置文件利用DOWNLOADMANAGER模块实现下载上传文件以原始文件名保存（含中文） MYSQL联表删除实现文件下载 [JQUERY]AJAX带着SESSION跨域请求PHP [JQUERY]加载进度条搞笑笑话防SQL攻击的第一步帝国CMS做对外站点之安全注意点消除电脑桌面的快捷方式的小箭头工具自适应窗口大小的全屏切换单例模式的上传类支持多文件上传搞笑专辑② 搞笑专辑① 关于我与本站的几点说明手机APP开发之混合开发 THINKPHP 更新一个字段等于本身的值加上更新值帝国CMS显示头条置顶推荐标识实现方法判断2个时间段是否有交集 [JS]获取某个时间的时间戳及倒计时 [HTML]IE6下的固定定位FIXED PHP版的AJAX即CURL [JQUERY]解决IE8AJAX跨域请求的问题获取IP地址 [JS+JQUERY]禁止右键 URL重写规则多网站完整配置 MYSQL内置函数搞笑啊 SUBLIME快捷键 [HTML]网页常用技巧漂浮中文附件 INLINE-BLOCK布局主要代码键盘失灵 SUBLIME支持中文编码 LINUX下解决PHPMYADMIN点击什么都提示错误的方法 LINUX重置ROOT密码新安装WAMP出现禁止访问修改MYSQL密码和PHPMYADMIN的登录密码电脑网页自适应手机加入SWF，FLV视频文件 [JS]只能输入数字的INPUT 访问帝国备份王报错设置不刷新直接生成设置SESSION不过期不用递归形成无限极分类 IE下载高版本XLS成ZIP IE不显示图片 IE定位乱跑 IE6设置背景透明 MYSQL更新某个字段等于其他字段之差登录提示错误 CSS设置文本溢出显示省略号 [JS]获取JSON的长度 THINKPHP多表关联字段查询 THINKPHP根据权限查询可以操作的菜单栏目 THINKPHP无限极分类类 PHP判断数组是几维数组 PHP无限级分类（递归） PHP对二维数组进行排序的函数 PHP返回分隔符后的第一个和最后一个 THINKPHP自带的权限认证之函数写法 [JAVASCRIPT]WINDOW.LOCATION属性明细 PHP对二维数组进行排序 PHP有用的数组函数 THINKPHP常用技巧 THINKPHP权限验证 THINKPHP上传中文图片以后生成含有中文的缩略图 THINKPHP异步上传实现编写程序需要注意事项 MEDOO常用查询 MEDOO常用WHERE条件字体CSS 网站布局雷人语录 [JQUERY]全选不选多点几次不管用 MSSQL常用语句 MEDOO连接MSSQL PHP设置可以跨域请求 PHP设置可以跨域请求 [HTML/数据库]富文本编辑器复制进去的文本在修改的时候无法换行处理正则表达式类切换 [PHP/HTML/JS]防止重复提交的方法 PHP判断能不能上网判断编码方式新闻类网站模板在网页标签栏前面添加图标元字符与转义 PHP连接数据要求的SQL 2012 客户端 MEDOO数据库框架兄弟你玩过暴力摩托吗图片新闻加上列表模版高冷笑段,生活中的各种冷爆笑,这夫妻都够不着调的经典加密解密函数改变附件上传的浏览按钮纯CSS实现带三角形的提示框纯CSS实现有效果的圆角按钮分页函数封装文件上传封装多文件检查表单提交的数据防止GET传值攻击 MYSQL常用语句 MYSQL设置任意IP连接 [JS]获取某个元素下的所有元素自增字段清零 SQL安装总是提示重启帝国网站管理系统GBK版转UTF-8版方法 CAN'T CREATE/WRITE TO FILE 'C:/WINDOWS/TEMP/#SQL_A80_0.MYD' (ERRCODE: 17) ( 1 ) PHPMYADMIN点击编辑或者搜索是空白帝国CMS调用PNG图像做标题图片 PHP判断是不是IE浏览器 PHP按字母排序输出 PHP按今天几天内更早排序输出 PHP查询多个表并按某个字段排序输出判断输出时间等 PHP判断今天昨天更久方法 PHP获取地址上传多文件 HEADER函数全解 PHP连接数据库中文表名 [JS]取2个正整数之间的随机整数 [JQUERY]隔行变色 [JQUERY]选择器 [JS]移入移出显示隐藏 [JS]同时跳转多个页面 [JAVASCRIPT]实现链接跳转（根据不同IP互相跳转） [JQUERY]格式化显示从富文本粘贴来的内容 [JS]验证是否有来源页面 [JAVASCRIPT]JS代码中加入PHP代码看上去有凹凸感的边框鼠标经过变换内容导航栏同时跳转多个页面自适应窗口的框架兼容模式下放在TABLE中的层级不管用去掉A链接点击时候的虚线框 THINKPHP常用常量 THINKPHP常用配置 THINKPHP带搜素的分页功能实现标题截取超出指点长度显示省略号 THINKPHP去掉INDEX.PHP的配置 THINKPHP连接MSSQL

[HTML/CSS/JQUERY]JQUERY插件之TAB选项卡

  
  <!-- 支持嵌套tab切换，嵌套的时候最外层换一个样式名称再调用一次既可！ -->
  <!-- html结构 -->
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>tab切换</title>
      <style type="text/css">
          body{background: #323232; margin: 0;padding: 0; color: #000}
          a{ color: #fff;font-size: 14px; text-decoration: none;}
          .tabmain{width: 600px;height: 400px; margin:100px 200px; display: inline-block;
          vertical-align: top;
          zoom: 1; /* Fix for IE7 */
          *display: inline; /* Fix for IE7 */ margin-right: 30px;}
          .tabitem{height: 40px; line-height: 40px; font-size: 0px;}
          .tabitem a{
              display: inline-block; vertical-align: top; zoom: 1; /* Fix for IE7 */ 
              *display: inline; /* Fix for IE7 */ padding: 0 30px; text-align: center;
               margin-right: 10px; border-radius: 4px 4px 0 0; background: #777
           }
          .tabitem a.active{background: #fff;color: #000; }
          .tabcontent{
              width: 600px; height: 460px; background: #fff; overflow: hidden; 
              position: relative;}
          .tabcontent .contentitem{
              width: 100%;height: 100%; display: none;position: absolute; 
              left: 0; top: 0; background: #fff
          }
          .tabcontent .current{display: block}
      </style>
  </head>
  <body>
      <div class="tabmain" data-arg='{"type":"slide","index":4,"auto":true,"fun":"click"}'>
          <div class="tabitem">
              <a href="javascript:;" class="active">新闻</a>
              <a href="javascript:;">娱乐</a>
              <a href="javascript:;">游戏</a>
              <a href="javascript:;">工作</a>
          </div>
          <div class="tabcontent">
              <div class="contentitem current" style="background: red">新闻内容</div>
              <div class="contentitem" style="background:yellow">娱乐内容</div>
              <div class="contentitem" style="background:pink">游戏内容</div>
              <div class="contentitem" style="background:purple">工作内容</div>
          </div>
      </div>
  ?
      <div class="tabmain">
          <div class="tabitem">
              <a href="javascript:;" class="active">新闻</a>
              <a href="javascript:;">娱乐</a>
              <a href="javascript:;">游戏</a>
              <a href="javascript:;">工作</a>
          </div>
          <div class="tabcontent">
              <div class="contentitem current">新闻内容</div>
              <div class="contentitem">娱乐内容</div>
              <div class="contentitem">游戏内容</div>
              <div class="contentitem">工作内容</div>
          </div>
      </div>
      <script type="text/javascript" src="/wskin/js/jquery.js"></script>
      <script type="text/javascript" src="/wskin/js/tab.js"></script>
      <script type="text/javascript">
      $(function(){
          // Tab.init($(".tabmain"));
          $(".tabmain").xstab();
      })
      </script>
  </body>
  </html>

  // tab.js
  ;(function($){
      var Tab=function(el){
          var mytab=this;
          this.el=el;
          // 定义默认的配置参数
          this.config={
              "type":"default",//采用什么形式展示内容div
              "index":0,//默认显示第几个
              "auto":false,//是否自动切换
              "fun":"mouseover",//切换方式
          };
  ?
          //合并配置参数
          $.extend(this.config,this.getConfig());
          // console.log(this.config)
  ?
          // 调度切换
          el.find(">.tabitem a").on(this.config.fun,function(){
              mytab.myswitch($(this).index())
          })
  ?
          // 如果传了默认显示第几个就加载时切换一次
          if(this.config.index>1){
              mytab.myswitch(this.config.index-1);
          }
  ?
          // 是不是配置了自动切换
          if(this.config.auto){
              var timer="",nowindex=0;
              if(this.config.index>1){
                  nowindex=this.config.index+1;
              }
              timer=mytab.autoPlay(nowindex);
              this.el.hover(function(){
                  window.clearInterval(timer)
              },function(){
                  nowindex=$(this).find(">.tabitem a.active").index();
                  timer=mytab.autoPlay(nowindex+1)
              })
          }
      }
  ?
      Tab.prototype={
          autoPlay:function(index){
              var _this_=this,mylen=this.el.find(">.tabitem a").length;
              return window.setInterval(function(){
                  if(index>=mylen){
                      index=0;
                  }
                  _this_.myswitch(index)
                  index+=1;
              },3000)
          },
  ?
          getConfig:function(){
              var args=this.el.data('arg');
              var mylen=this.el.find(">.tabitem a").length
              if(args && args.fun!="click"){
                  args.fun="mouseover";
              }
              if(args){
                   if(!isNaN(parseInt(args.index)) && parseInt(args.index)<=mylen){
                      args.index=parseInt(args.index);
                  }else{
                      args.index=0;
                  }
              }
              return args;
          },
          myswitch:function(index){
              this.el.find(">.tabitem a:eq("+index+")").addClass('active')
                  .siblings().removeClass('active');
              //_this_表示的是寻找到的那个内容div
              var _this_=this.el.find(">div.tabcontent > div.contentitem:eq("+index+")");
              if(this.config['type']=="fade"){
                  _this_.stop(true,true).fadeIn().siblings().fadeOut();
              }else if(this.config['type']=="slide"){
                  _this_.stop(true,true).slideDown().siblings().slideUp();
              }else{
                  _this_.stop(true,true).addClass("current").siblings()
                      .removeClass("current");
              }
          }
      }
      // 用Tab.init($(".tabmain"))形式调用的方法
      Tab.init=function(els){
          var _this_=this;
          els.each(function(){
              new _this_($(this))
          })
      };
      // 用jquery链式调用的方法
      $.fn.extend({
          xstab:function(){
              // this表示的是jquery对象$(".tabmain")
              this.each(function(){
                  new Tab($(this));
              })
          }
      });
      window.Tab=Tab;
  })(jQuery);

下一篇：[HTML]IE6下的固定定位FIXED

上一篇：[CSS]纯CSS实现的漂亮菜单条

网站备案信息：滇ICP备20004416号-1

申明:此网站所用素材来源网络,若涉及到侵权,请联系我们,我们会在第一时间进行审核处理