原生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 条评论
登录 后参与评论

相关文章

来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4878
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2596
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2100
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4055
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5616
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3215
来自专栏落花落雨不落叶

canvas画简单电路图

64311
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3899
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5377
来自专栏魂祭心

原 canvas绘制clock

4184

扫码关注云+社区