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

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн sx88

  • Местный житель
  • ***
  • Topic Author
  • Сообщений: 345
  • ASUS P8H61-MLE intel g630
Здравствуйте.
Предыстория: работаю в магазине, взялся написать что-то вроде сайта визитки с товаром и его описанием. Товара довольно много, и покупателю трудно будет выделить что-то конкретное, среди общей массы товара.   Хочу в index.html сделать некое подобие сортировки. Т.е. по умолчанию загружается весь ассортимент, есть три кнопочки (эдакие фильтры):
  • щелкнул по 1ой -- одна группа товаров
  • по 2ой -- подключается вторая
  • нажата 1я и 2я кнопка -- отображается 1ая и 2ая группа
  • щелкнул по третьей -- 3я группа товара
  • щелкнул по всем трем -- все группы видны (полный ассортимент)


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

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

p.s. Прошу только, чтобы не говорили просто :"Копай в сторону jQuery/java/учи php !" Желательно более конкретное направление :) Спасибо
« Последнее редактирование: 30 Июнь 2014, 20:44:11 от sx88 »
 


Оффлайн Defman

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

*учимся говорить культурно. endru
« Последнее редактирование: 01 Июль 2014, 08:27:01 от endru »
:)
 

Оффлайн Defman

  • Здесь могла быть Ваша реклама.
  • Активный пользователь
  • **
  • Сообщений: 97
  • И здесь тоже, но я не продаю рекламу.
    • Блог
<!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
« Последнее редактирование: 01 Июль 2014, 08:27:41 от endru »
:)
 

Оффлайн sx88

  • Местный житель
  • ***
  • Topic Author
  • Сообщений: 345
  • ASUS P8H61-MLE intel g630
Defman, благодарю. Именно то, что и нужно *палец_вверх*
Ничего не нужно объяснять, все и так расписано. 
От меня благодарность и "+1" к карме.
 

Оффлайн Defman

  • Здесь могла быть Ваша реклама.
  • Активный пользователь
  • **
  • Сообщений: 97
  • И здесь тоже, но я не продаю рекламу.
    • Блог
:)
 

Теги:
 

[Решено] Matlab программирование и RS-232 port

Автор Fang

Ответов: 0
Просмотров: 1761
Последний ответ 02 Август 2013, 14:11:40
от Fang
[Решено] Python не обновляется до 3+ версии

Автор Fieryx

Ответов: 6
Просмотров: 2070
Последний ответ 09 Октябрь 2013, 00:38:33
от Olej
[Решено] MyISAM to InnoDB - косяк?

Автор LinuxID

Ответов: 4
Просмотров: 1456
Последний ответ 07 Март 2014, 00:19:46
от LinuxID
[Решено] Python CGI не обрабатывает формы, но в целом работает

Автор agentgoblin

Ответов: 2
Просмотров: 3483
Последний ответ 26 Июнь 2015, 18:28:03
от agentgoblin
[РЕШЕНО]Debian 9 + ModX Revo 2.5.7

Автор Lord_Markus

Ответов: 0
Просмотров: 1462
Последний ответ 11 Август 2017, 11:44:54
от Lord_Markus