[html]

<!-- Akadaemia Anyder | Архив шаблонов, персонажей и пр. -->
<div class="moon-menu">
  <a href="#moon_player" data-tab="moon-tab1" class="moon-tab active">Игрок</a>
  <a href="#moon_game" data-tab="moon-tab2" class="moon-tab">Роли</a>
  <a href="#moon_templates" data-tab="moon-tab3" class="moon-tab">Шаблоны</a>
</div>
<div class="moon-content">

  <div id="moon-tab1" class="active">
    <div class="moon-h2">Содержимое Таба 1</div>
    <p>про себя, про роли, ссылки на гештальты и розыски</p>
    <div class="moon-h2">Содержимое Таба 1.1</div>
    <p>приколы для проверки второго заголовка в табе.</p>
  </div>

  <div id="moon-tab2">
    <div class="moon-h2">Содержимое Таба 2</div>
    <p>Список на персонажей и проекты</p>
  </div>

  <div id="moon-tab3">
    <div class="moon-h2">эпизоды</div>
    <p>ссылки на шаблоны списком</p>
    <div class="moon-h2">дневники</div>
    <p>ссылки на шаблоны списком</p>
  </div>
</div>
<style>
  .moon-menu {
    display: flex;
    align-items: center;
    background: rgb(var(--accent800));
    padding: 0px 20px;
    height: 32px;
    width: 800px;
    box-sizing: border-box;
    justify-content: center;
  }

  .moon-tab {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    background-color: transparent;
    color: rgb(var(--accent200));
    font: 400 16px / 100% var(--font);
    text-transform: lowercase;
    border: none;
    box-sizing: border-box;
    text-decoration: none !important;
  }

  .moon-tab:hover,
  .moon-tab.active {
    background-color: transparent;
    color: rgb(var(--accent100));
  }

  .moon-content {
    box-shadow: inset 0 0 0 1px rgb(var(--basic800));
    width: 800px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .moon-h2 {
    background: rgb(var(--basic900));
    color: rgb(var(--accent600));
    font: 400 16px / 100% var(--font);
    text-transform: lowercase;
    margin-top: 0px;
    padding: 8px 0px;
    width: 800px;
    text-align: center;
  }

  .moon-content p {
    padding: 8px;
  }

  .moon-content>div {
    display: none;
  }

  .moon-content>div.active {
    display: block;
  }
</style>
<script>
  "use strict";

  function Tabs() {
    var bindAll = function() {
      var menuElements = document.querySelectorAll("[data-tab]");
      for (var i = 0; i < menuElements.length; i++) {
        menuElements[i].addEventListener("click", change, false);
      }
    };
    var clear = function() {
      var menuElements = document.querySelectorAll("[data-tab]");
      for (var i = 0; i < menuElements.length; i++) {
        menuElements[i].classList.remove("active");
        var id = menuElements[i].getAttribute("data-tab");
        document.getElementById(id).classList.remove("active");
      }
    };
    var change = function(e) {
      e.preventDefault();
      clear();
      e.target.classList.add("active");
      var id = e.currentTarget.getAttribute("data-tab");
      document.getElementById(id).classList.add("active");
    };
    bindAll();
  }
  var connectTabs = new Tabs();
</script>[/html]

Отредактировано Гнвоерк (2024-09-06 12:36:17)