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

相关文章

来自专栏水击三千

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

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

2615
来自专栏.Net移动开发

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

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

884
来自专栏性能与架构

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

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

4318
来自专栏十月梦想

表单

1.表单控件     1.input标记         1.input标记             提供文本输入框,密码输入框,按钮,单选按钮,多选按钮,...

803
来自专栏小巫技术博客

A018-布局之TableLayout

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

882
来自专栏Google Dart

AngularDart Material Design 弹出框 顶

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

692
来自专栏deepcc

jquery nicescroll 配置参数

4028
来自专栏python3

tkinter -- Event(1)

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

611
来自专栏keyWords

5、React组件事件详解

2.在React中,每个事件处理回调函数都会自动绑定到组件实例(使用ES6语法创建的例外);

3781
来自专栏每日一篇技术文章

weex-09-组件text的用法

1.怎么给text 组件赋值 2.怎么设置组件的背景颜色和字体颜色 3.怎么给设置组建的边框颜色,宽度,样式 4.怎么设置文字斜体 加粗 下划线等 5....

2632

扫码关注云+社区

领取腾讯云代金券