js封装tab标签页实例分享


Posted in Javascript onDecember 19, 2016

话不多说,请看代码

<html>
<head>
  <title></title>
  <meta charset="UTF-8">
  <style>
    *{ padding:0; margin:0;}
    .block{ display:block;}
    .none{ display:none;}
    #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
    #tab1,#tab2{ list-style:none;}
    #tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
    #tab2 li:hover{ background:#CCC;}
    #tab1 li.on,#tab2 li.on{ background:#9C3;}
    #wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
  </style>
</head>
<body>
<div id="wrap">
  <ul id="tab1">
    <li class="on">第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>
  <br clear="all" />
  <div class="block">第一部分</div>
  <div class="none">第二部分</div>
  <div class="none">第三部分</div>
</div>
<div id="wraps">
  <ul id="tab2">
    <li class="on">第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>
  <br clear="all" />
  <div class="block">第一部分</div>
  <div class="none">第二部分</div>
  <div class="none">第三部分</div>
</div>
<script type="text/javascript">
  tab("wrap","tab1","mouseover")
  tab("wraps","tab2");
  function tab(wrap,navul,eve){
//tab效果封装,目前只有两种变换方式,一种为点击事件click(也是默认事件),另外一种为鼠标移过事件mouseover
    var divs=document.getElementById(wrap).getElementsByTagName("div");
    var lis=document.getElementById(navul).getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
      lis[i].indx=i;
      if(eve=="click" || eve==null){
        lis[i].onclick=function(){
          for(i=0;i<lis.length;i++){
            lis[i].className="";
            divs[i].className="none";
            this.className="on";
            divs[this.indx].className="block";
          }
        }
      }else if(eve=="mouseover"){
        lis[i].onmouseover=function(){
          for(i=0;i<lis.length;i++){
            lis[i].className="";
            divs[i].className="none";
            this.className="on";
            divs[this.indx].className="block";
          }
        }
      }
    }
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 #Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 #Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 #Javascript
jQuery网页定位导航特效实现方法
Dec 19 #Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 #Javascript
详解jQuery lazyload 懒加载
Dec 19 #Javascript
JS实现滑动门效果的方法详解
Dec 19 #Javascript
You might like
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
载入进度条 效果
2006/07/08 Javascript
javascript 控制弹出窗口
2007/04/10 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python 三元运算符使用解析
2019/09/16 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
高二生物教学反思
2014/01/27 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript