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 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
详解JS实现系统登录页的登录和验证
Apr 29 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
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python绘制条形图方法代码详解
2017/12/19 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python实现逻辑回归的示例
2020/10/09 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
学校招生宣传广告词
2014/03/19 职场文书
考博专家推荐信
2014/05/10 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
小学运动会开幕词
2015/01/28 职场文书
员工离职证明范本
2015/06/12 职场文书
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技