[РЕШЕНО] Подключение по щелчку в index.html дополнительной страницы.

sx88 · 30 июня 2014, 20:12:44

Здравствуйте.
Предыстория: работаю в магазине, взялся написать что-то вроде сайта визитки с товаром и его описанием. Товара довольно много, и покупателю трудно будет выделить что-то конкретное, среди общей массы товара. Хочу в index.html сделать некое подобие сортировки. Т.е. по умолчанию загружается весь ассортимент, есть три кнопочки (эдакие фильтры):

щелкнул по 1ой -- одна группа товаров
по 2ой -- подключается вторая
нажата 1я и 2я кнопка -- отображается 1ая и 2ая группа
щелкнул по третьей -- 3я группа товара
щелкнул по всем трем -- все группы видны (полный ассортимент)

Как вижу реализацию: можно сделать три отдельный документа, в первом -- только одна группа, во второй -- вписать 1ю и 2ю группу, в третьем -- все 3 группы. Костыли, но коли ничего не придумаю...

Вопрос: может, подскажет как это реализовать, или хотя бы даст направления в какую сторону гуглить?

p.s. Прошу только, чтобы не говорили просто :"Копай в сторону jQuery/java/учи php !" Желательно более конкретное направление

Спасибо

Defman · 30 июня 2014, 20:19:59

Не знаю, зачем тебе учить java (попутал с javascript?), но вот все же копать в сторону jQuery и JavaScript тебе надо будет самому.
Могу конечно написать специальный простой код, но как он работает - объяснять не буду. Скажу лишь, что на jQuery будет.

*учимся говорить культурно. endru

Defman · 30 июня 2014, 20:31:40

Код Выделить


<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
   <style>
      .button {
         background: #777;
         display: inline-block;
         padding: 7px;
         color: #fff;
      }
      
      .checked {
         font-weight: bold;
      }
      
      .tab {
         display: none;
      }
   </style>
   <script>
      $(document).ready(function() {
         $(".button").click(function() {
            $(this).toggleClass("checked");
            $(".tabs").children(".tab").eq($(this).index()).toggle();
         });
      });
   </script>
   <div class="buttons">
      <div class="button">Button1</div>
      <div class="button">Button2</div>
      <div class="button">Button3</div>
   </div>
   <div class="tabs">
      <div class="tab" id="1">1 table</div>
      <div class="tab" id="2">2 table</div>
      <div class="tab" id="3">3 table</div>
   </div>
</body>
</html>

При клике по кнопочкам будут появляться/исчезать <div class="tab"> в зависимости от той кнопки, на которую нажали. Может есть решение и на чистом JS, но мне было лень такое делать. (к тому же зачем? Есть jQuery, зачем себе устраивать секс с ЯП?)

*учимся говорить культурно. endru

sx88 · 30 июня 2014, 20:43:08

Defman, благодарю. Именно то, что и нужно *палец_вверх*
Ничего не нужно объяснять, все и так расписано.
От меня благодарность и "+1" к карме.

Defman · 30 июня 2014, 20:44:53

Цитата: sx88 от 30 июня 2014, 20:43:08"+1" к карме.

Которой тут нет

Русскоязычное сообщество Debian GNU/Linux

[РЕШЕНО] Подключение по щелчку в index.html дополнительной страницы.

sx88

Defman

Defman

sx88

Defman