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实例属性和原型属性示例详解
Nov 23 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
Vue中的methods、watch、computed的区别
Nov 26 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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删除数组中的特定元素的代码
2012/06/28 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP循环结构实例讲解
2014/02/10 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP文件操作实例总结
2016/09/27 PHP
php异常处理捕获错误整理
2019/09/23 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
js友好的时间返回函数
2016/08/24 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
大学活动总结模板
2014/07/10 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
现货白银电话营销话术
2015/05/29 职场文书
编写python程序的90条建议
2021/04/14 Python
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python