demos/tabs.html

<!DOCTYPE html>
<html lang="zh-Hans">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Tabs</title>
  <style>
    body{ background: #E2DED2; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
    *{ box-sizing: border-box; }
    .wrapper{ margin-top: 3em; position: relative; border-radius: 4px; padding: 8px; width: 460px;
      background: repeating-linear-gradient( -45deg, #D7D3C7, #D7D3C7 2px, #CECABE 2px, #CECABE 4px); }
    .wrapper::before{ content:'';display: block;position: absolute;top: -2px; bottom: -2px; left: -2px; right: -2px;
      border: 1px solid #CBC7BC; border-radius: 6px; z-index: -1; }
    .tabs{ background: #F2F1EC; }
    .tabs ol{ list-style: none;  margin: 0; padding: 0; }
    .tabs ol:first-child{ display: flex; border: 1px solid #B8B3AE; border-bottom: none; }
    .tabs ol:first-child>li{ flex-grow: 1; padding: 20px; text-align: center; text-transform: uppercase;
      background: linear-gradient(to bottom, #e5dfd3 0%,#d0c9b8 100%); color: #847E6F; text-shadow: 1px 1px 1px white;
      box-shadow: inset 0 0 2px hsla(0,0%,0%,0.15); }
    .tabs ol:first-child>li.active{ background: linear-gradient(to bottom, white 0%,#F0EDE6 100%);
      color: #222222; box-shadow: none; }
    .tabs ol:nth-child(2){ border: 1px solid #B8B3AE; border-top: none; background: #F0EDE6; }
    .tabs ol:nth-child(2) > li{ display: none; min-height: 5em; }
    .tabs ol:nth-child(2) > li.active{ display: flex; justify-content: center; align-items: center; }
    .circle{ width: 80px; height: 80px; border-radius: 50%; background: #DFDCD3;
      display: flex; justify-content: center; align-items: center; font-size: 28px; color:#333; margin: 5em 0; }
  </style>

  <div class="wrapper">
    <div class="tabs">
      <ol data-role="tabs-nav">
        <li>how buying works</li>
        <li>how selling works</li>
      </ol>
      <ol data-role="tabs-panes">
        <li>
          <div class="circle">
            1
          </div>
        </li>
        <li>
          <div class="circle">
            2
          </div>
        </li>
      </ol>
    </div>
  </div>

  <script src="../lib/dom/index.js"></script>
  <script src="view-source.js"></script>
  <script src="../lib/tabs/index.js"></script>
  <script>
    new Tabs({
      element: document.querySelectorAll('.tabs')[0]
    })
  </script>
  <!--百度统计-->
  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?950926001a84a4f88cd3e1c7c0bfac08"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>
</html>