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

相关文章

来自专栏一“技”之长

Bootstrap响应式前端框架笔记四——表单

    在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时...

851
来自专栏性能与架构

微信小程序示例 - 交互组件

消息提示框 toast ? 代码结构 <toast bindchange="..."> 消息内容 </toast> 属性 duration - 消息显示...

3928
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上实现电子签名功能

设置控件的背景色,将该属性设置为“128, 255, 128”,表示RGB颜色,如图1;

1462
来自专栏python3

tkinter -- Event(1)

分别测试鼠标的 Relase 事件,只有当鼠标被 Relase 后移动才回产生 Relase 事件

491
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:手机应用的TextTabBar快速实现方式

设置控件字体的颜色,将该属性设置为“95, 100, 110”,表示RGB颜色,如图2;

744
来自专栏水击三千

浅谈JavaScript的事件(事件类型)

  Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息。DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发;焦点事件,元素...

2395
来自专栏快乐八哥

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时...

3148
来自专栏Google Dart

AngularDart Material Design 弹出框 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

572
来自专栏小巫技术博客

A018-布局之TableLayout

表格布局,顾名思义像表格一样进行布局。我们通常配合TableRow一起使用,TableRow代表一行,有多少个TableRow就有多少行。

822
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——ImageTabBar控件的使用方式

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写ImageResourceID(菜单项图片名称),SelectImageResourceID(...

583

扫码关注云+社区