原生JS实现Tab切换效果和模态框效果

原生JS实现Tab切换效果

效果展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Modal</title>
  <style>
    .clearfix:after{
        content:'';
        display: block;
        clear: both;
    }
    li{
        list-style: none;
    }
    li,ul{
        margin:0;
        padding:0;
    }
    .tab{
        width:600px;
        border:1px solid red;
        margin:20px auto;
        border:1px solid #ccc;
        padding:20px 10px;
        border-radius: 4px;
    }
    
    .tab-header{
        border-bottom:1px solid #ccc;

    }
    .tab-header .active{
        border: 1px solid #ccc;
        border-radius: 4px 4px 0 0;
        color: #333;
        border-bottom-color: #fff;
        margin-bottom: -1px;
    }
    .tab-header>li{
        float:left;
        color: lightblue;
        cursor: pointer;
        padding: 10px;
        border-top:1px solid #fff;
        border-left:1px solid #fff;
        border-right:1px solid #fff;
    }
    
    .tab-container{
        padding: 20px 10px;
    }
    .tab-container>li{
        display: none;
    }
    .tab-container .active{
        display: block;
    }
  </style>
</head>
<body>
    <div class="tab">
        <ul class="tab-header clearfix">
            <li class="active">选项1</li>
            <li>选项2</li>
            <li>选项3</li>
        </ul>
        <ul class="tab-container">
            <li class="active">内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ul>
    </div>
    <script>
        var tabHeader = document.querySelector('.tab-header');
        var tabLis = document.querySelectorAll('.tab-header>li');
        var tabPanels = document.querySelectorAll('.tab-container>li');
        tabHeader.addEventListener('click',function(e){
            var clickNode = e.target;
            if(clickNode.tagName.toLowerCase() === 'li'){
                for(var i=0; i<tabHeader.children.length;i++){
                    tabLis[i].classList.remove('active');
                }
                clickNode.classList.add('active');
                var index = [].indexOf.call(tabLis,clickNode);
                //tabLis返回的是类数组对象,没有indexOf方法,所以要用到call
                for(var i=0; i<tabPanels.length;i++){
                    tabPanels[i].classList.remove('active');
                }
                tabPanels[index].classList.add('active');
            }
        })
    </script>
</body>
</html>

原生JS实现模态框效果

效果展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Modal</title>
  <style>
      #btn {
          margin: 10px;
        }
     .overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          height: 100%;
          width:  100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 99;
        }

        .modal {
          width:  500px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border: 1px solid #ccc;
          border-radius: 6px;
          background-color: #fff;
        }

        .modal>h2 {
          border-bottom: 1px solid #ccc;
          margin: 0;
          line-height: 2;
          padding-left: 20px;
        }

        .modal>.detail {
          padding:  0 20px;
          height: 100px;
          border-bottom: 1px solid #ccc;
        }

        .modal>.btn {
          line-height: 2.2;
          cursor: pointer;
          float: right;
          margin: 0 10px;
        }
  </style>
</head>
<body>
    <input id="btn" type="button" value="点我">
    <div class="overlay">
      <div class="modal">
        <h2>我是标题</h2>
        <div class="detail">
          <p>我是内容</p>
          <p>我是内容</p>
        </div>
        <span class="btn close">确定</span>
        <span class="btn cancel">取消</span>
      </div>
    </div>
    <script>
        var btn = document.getElementById('btn'),
                overlay = document.getElementsByClassName('overlay')[0],
                modal = document.getElementsByClassName('modal')[0];
        btn.addEventListener('click',function(e){
            e.stopPropagation();
            overlay.setAttribute('style','display:block');
        });
        document.body.addEventListener('click',function(e){
            overlay.setAttribute('style','display:none');
        });
        modal.addEventListener('click',function(e){
            e.stopPropagation();
            if(e.target.classList.contains('close') || e.target.classList.contains('cancel')){
                overlay.setAttribute('style','display:none');
            }
        });
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏尾尾部落

[剑指offer] 左旋转字符串

汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果。对于一个给定的字符序列S,请你把其循环左移K位后的序列输...

982
来自专栏技术墨客

React学习(3)——列表、键值与表单 原

    例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。

1003
来自专栏V站

Note丨记41条Web程序员日常使用的代码!

1888
来自专栏学海无涯

HBase之比较过滤器

最近在学习Hadoop中的HBase,通过本次实验,可以理解比较过滤器,能够掌握并运用。主要包含行比较过滤器和列族比较过滤器实验。在进行实验之前需要导入HBas...

3785
来自专栏Java Edge

React.js实战之React 生命周期1 组件的生命周期

1394
来自专栏10km的专栏

jface databinding:使用CheckboxTableViewer实现表中(Set)对象与CheckTable中选中条目数据绑定

上一篇博文《jface databinding:可多选的widget List组件selection项目与java.util.List对象的双向数据绑定》讲述了...

29010
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(三)表单

table>tr3>td5 + tab键  <!-- 建立3行5列的表格 -->

903
来自专栏GreenLeaves

Js框架设计之DomReady

一、在介绍DomReady之前,先了解下相关的知识 1、HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不...

2086
来自专栏蜉蝣禅修之道

Leetcode之Longest Valid Parentheses

1192
来自专栏专知

【关关的刷题日记58】Leetcode 112 Path Sum

关关的刷题日记58 – Leetcode 112 Path Sum 题目 ? 题目的意思是判断一棵二叉树跟到叶子节点的所有路径中是否有一条路径的和等于给定的和。...

3364

扫码关注云+社区