Показать сообщение отдельно
  #10 (permalink)  
Старый 23.11.2017, 23:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Влад137,
в строке 70 ещё нет элементов с которыми работает скрипт.
нужно дождаться загрузки страницы.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Главное окно</title>
  <style type="text/css" media="screen">
  /* Базовый контейнер табов */
  .tabs {
    min-width: 320px;
    max-width: 800px;
    padding: 0px;
    margin: 50px;
  }
  /* Стили секций с содержанием */
  .tabs>section {
    display: none;
    padding: 15px;
    background: #fff;
    border: 1px solid #000;
  }
  .tabs>section>p {
    margin: 0 0 15px;
    line-height: 1.5;
    color: black;
  }

  /* Прячем чекбоксы */
  .tabs>input {
    display: block;
    position: absolute;
  }
  /* Стили переключателей вкладок (табов) */
  .tabs>label {
    display: inline-block;
    margin: 0 0 1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #aaa;
    border: 0px solid #ddd;
    border-width: 1px 1px 1px 1px;
    background: white;
    /*border-radius: 3px 3px 0 0;*/
  }

  /* Изменения стиля переключателей вкладок при наведении */

  .tabs>label:hover {
    color: #888;
    cursor: pointer;
  }
  /* Стили для активной вкладки */
  .tabs>input:checked+label {
    color: #555;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background: #fff;
  }
  /* Активация секций с помощью псевдокласса :checked */
  #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
    display: block;
  }




  </style>
  <script>
  window.addEventListener('DOMContentLoaded', function() {
  var active = 0, inputs=document.querySelectorAll('.tab_pdt');
  document.querySelector('#button_pdt').addEventListener('click', function() {
  active= ++active % inputs.length;
      inputs[active].checked = true
  })
  });

  </script>
</head>
<body>

  <input type="button" name="button" id="button_pdt" value="Товары" />


  <div class="tabs">
    <input class="tab_pdt" id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Товар 1">Товары 1</label>

    <input class="tab_pdt" id="tab2" type="radio" name="tabs">
    <label for="tab2" title="Товар 2">Товары 2</label>

    <input class="tab_pdt" id="tab3" type="radio" name="tabs">
    <label for="tab3" title="Товар 3">Товары 3</label>

    <section id="content-tab1">
      <p>Список товаров</p>
      <p>
        <label for="id_search">Фильтр по ИД:</label>
        <input type="search" name="search" id="id_search">
      </p>
      <p>
        <label for="id_search">Фильтр по имени:</label>
        <input type="search" name="search" id="id_search">
      </p>
      <table border="1" cellpadding="10" cellspacing="0">
        <tr>
          <th id="ID">ID</th>
          <th id="idPdt">Имя</th>
          <th id="pdtDescriprion">Описание</th>
          <th id="pdtPrice">Цена</th>
          <th id="pdtQuantity">Количество</th>
        </tr>
        <tr>
          <td>1</td>
          <td><a href="Карточка товара.html">Ноутбук Lenovo</a></td>
          <td>Ноутбук ThinkPad T460 14"FHD(1920x1080),i5-6200U(2,3GHz),4Gb,500GB@5400+8Gb cache, HD Graphics 520, WiFi,BT,TPM,FPR,WWAN ready,3cell+3cell,Cam,Win7 Pro 64 + Win10 Pro upgrade coupon,1,7kg, 3y OS</td>
          <td>100</td>
          <td>2</td>
        </tr>
        <tr>
          <td>2</td>
          <td><a href="#">Клавиатура OKLICK</a></td>
          <td>Клавиатура OKLICK 140M, &nbsp;USB, черный</td>
          <td>50</td>
          <td>8</td>
        </tr>
        <tr>
          <td>3</td>
          <td><a href="#">Сетевой адаптер</a></td>
          <td>Сетевой адаптер WiFi D-Link DWA-582 DWA-582/RU</td>
          <td>7</td>
          <td>0</td>
        </tr>
      </table>
    </section>
    <section id="content-tab2">
      <p>
      2 товар 2
      </p>
    </section>
    <section id="content-tab3">
      <p>
      3 товар 3
      </p>
    </section>

  </div>

  <input type="button" name="button" id="exit_button" value="Выход" onclick="exit()" />

</body>

</html>
Ответить с цитированием