practical-javascript/handling-events/tabs_completejavascript.com.js at master · completejavascript/practical-javascript · GitHub

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
<div id="wrapper">
  <div data-tabname="one">Tab one</div>
  <div data-tabname="two">Tab two</div>
  <div data-tabname="three">Tab three</div>
</div>
<script>
  function asTabs(node) {
    var divChildNodes = node.getElementsByTagName('div');
    Array.prototype.forEach.call(divChildNodes, function(element){
      var button = document.createElement('button');
      button.textContent = element.getAttribute('data-tabname');
      node.insertBefore(button, divChildNodes[0]);
      element.style.display = 'none';
    });
    var btnChildNodes = node.getElementsByTagName('button');

    divChildNodes[0].style.display = 'block';
    btnChildNodes[0].style.backgroundColor = 'red';
    btnChildNodes[1].style.backgroundColor = 'yellow';
    btnChildNodes[2].style.backgroundColor = 'yellow';

    addEventListener('click', function(event) {
      if(event.target.nodeName === 'BUTTON') {
        if(event.target.textContent === 'one') {
          divChildNodes[0].style.display = 'block';
          divChildNodes[1].style.display = 'none';
          divChildNodes[2].style.display = 'none';
          btnChildNodes[0].style.backgroundColor = 'red';
          btnChildNodes[1].style.backgroundColor = 'yellow';
          btnChildNodes[2].style.backgroundColor = 'yellow';
        } else if(event.target.textContent === 'two') {
          divChildNodes[1].style.display = 'block';
          divChildNodes[0].style.display = 'none';
          divChildNodes[2].style.display = 'none';
          btnChildNodes[1].style.backgroundColor = 'red';
          btnChildNodes[0].style.backgroundColor = 'yellow';
          btnChildNodes[2].style.backgroundColor = 'yellow';
        } else if(event.target.textContent === 'three') {
          divChildNodes[2].style.display = 'block';
          divChildNodes[0].style.display = 'none';
          divChildNodes[1].style.display = 'none';
          btnChildNodes[2].style.backgroundColor = 'red';
          btnChildNodes[0].style.backgroundColor = 'yellow';
          btnChildNodes[1].style.backgroundColor = 'yellow';
        }
      }
    });
  }
  asTabs(document.querySelector("#wrapper"));
</script>