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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
js网页右下角提示框实例
Oct 14 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
javascript实现密码验证
Nov 10 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
Cookie 小记
2010/04/01 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
python3中确保枚举值代码分析
2020/12/02 Python
python中entry用法讲解
2020/12/04 Python
大学生求职简历的自我评价
2013/10/14 职场文书
企业趣味活动方案
2014/08/21 职场文书
投标邀请书范本
2015/02/02 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL