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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue视频播放暂停代码
Nov 08 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
JavaScript实现简单验证码
Aug 24 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实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
如何运行Python程序的方法
2013/04/21 Python
Python中的作用域规则详解
2015/01/30 Python
python集合类型用法分析
2015/04/08 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
南京某公司笔试题
2013/01/27 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
Structs界面控制层技术
2013/10/11 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
公司慰问信范文
2015/03/23 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
cf战队宣传语
2015/07/13 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Django使用echarts进行可视化展示的实践
2021/06/10 Python
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电