tabify/example.html at master · fredsterss/tabify · 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
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .active { color: blue; }
      .hidden { display: none; }
      #tabs li:hover { cursor: pointer; text-decoration: underline; }
    </style>
  </head>
  <body>
    <ol id="tabs">
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
    </ol>

    <div id="tabs-holder">
      <div>Content for tab 1</div>
      <div>Content for tab 2</div>
      <div>Content for tab 3</div>
      <div>Content for tab 4</div>
    </div>

    <script src="build/build.js"></script>
    <script>
      var tabify = require("tabify");
      var tabs = tabify(document.getElementById('tabs').getElementsByTagName('li'), document.getElementById('tabs-holder').getElementsByTagName('div'));
      window.tabs = tabs;
    </script>
  </body>
</html>