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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 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实现CSV文件的导入和导出类
2015/03/24 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
django使用xadmin的全局配置详解
2019/11/15 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
寄语十八大感言
2014/02/07 职场文书
二年级学生评语大全
2014/04/23 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers