ZhangYang's Blog

原生js造轮子

发表于 | 分类于

tab切换

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width-device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <title>JS Bin</title>
  <style>
    * {
      box-sizing: border-box;
    }
    .clearfix:after {
      content: '';
      display:block;
      clear: both;
    }
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #tab {
      width: 600px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin: 0 auto;
      margin-top: 20px;
    }
    .tab-header > ul > li {
      float: left;
      padding: 10px 20px;
      border: 1px solid #ccc;
      font-size: 20px;
      cursor: pointer;
    }
    .tab-header > ul > .active {
      background-color: #ccc;
    }
    .tab-content > ul > li {
      height: 400px;
      display:none;
    }
    .tab-content> ul > li > img {
      width: 100%;
      height: 100%;
    }
    .tab-content > ul > .current {
      display: block
    }
  </style>
</head>
<body>
  <section id="tab">
    <div class="tab-header">
      <ul class="clearfix">
        <li class="active">狗狗</li>
        <li>猫咪</li>
        <li>兔子</li>
      </ul>
    </div>
    <div class="tab-content">
      <ul>
        <li class="current"><img src="http://oqev4hx8u.bkt.clouddn.com/js-demo-1.png" alt=""></li>
        <li><img src="http://oqev4hx8u.bkt.clouddn.com/js-demo-2.png" alt=""></li>
        <li><img src="http://oqev4hx8u.bkt.clouddn.com/js-demo-3.png" alt=""></li>
      </ul>
    </div>
  </section>
  
  <script>
    function $(str){
      return document.querySelector(str);
    }
    var tabHeader = $('.tab-header > ul');
    var tabCt = $('.tab-content > ul');
    tabHeader.addEventListener('click',function(e){
      if(e.target.tagName.toLowerCase() === 'li'){
        for(var i = 0;i < tabHeader.children.length;i++){
          tabHeader.children[i].classList.remove('active');
        }
        e.target.classList.add('active');
        for(var i = 0;i < tabCt.children.length;i++){
          tabCt.children[i].classList.remove('current');
        }
        var index = [].indexOf.call(tabHeader.children,e.target); // 将点击的导航li的序号存到变量index
        tabCt.children[index].classList.add('current'); // 根据变量index来对应的给图片li添加class
      }  
    })
  </script>
</body>
</html>

效果

image

模态框

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width-device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <style>
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }
    #btn {
      cursor: pointer;
    }
    .panel {
      position: absolute;
      width: 300px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 10px;
      border: 1px solid;
      border-radius: 5px;
      background-color: #fff;
      display: none;
      z-index: 2;
    }
    .panel .close {
      float: right;
      margin-right: 5px;
      font-size: 24px;
      cursor: pointer;
    }
    .panel .sure,
    .panel .cancel {
      float: right;
      border: 1px solid;
      border-radius: 5px;
      padding: 5px;
      cursor: pointer;
    }
    .shadow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ccc;
      opacity: 0.7;
      z-index: 1;
      display: none;
    }
  </style>
  <title>JS Bin</title>
</head>
<body>
  <button id="btn">点我</button>
  <div class="panel clearfix">
    <div class="close">X</div>
    <h1>我是一级标题</h1>
    <p>我是一大段文字</p>
    <div class="cancel">取消</div>
    <div class="sure">确定</div>
  </div>
  <div class="shadow"></div>
  
  <script>
    function $(str){
      return document.querySelector(str);
    }
    var panel = $(".panel");
    var btn = $("#btn");
    var close = $(".panel>.close")
    var shadow = $(".shadow")
    btn.addEventListener("click", function(e){
      e.stopPropagation();
      panel.style.display = "block";
      shadow.style.display = "block";
    })
    close.addEventListener("click",function(){
      panel.style.display = "none";
      shadow.style.display = "none";
    })
    panel.addEventListener("click",function(e){
      e.stopPropagation();
    })
    window.addEventListener("click",function() {
      panel.style.display = "none";
      shadow.style.display = "none";
    })
  </script>
</body>
</html>

image