Форум

AdDa · #1 (**permalink**) 27.10.2014, 20:28

Имеется 4 ссылки вида:
<ul>
<li><a class="" href="#"data-filter=".h">H</a></li>
<li><a class="" href="#"data-filter=".ha">Ha</a></li>
<li><a class="" href="#"data-filter=".has">Has</a></li>
<li><a class="" href="#"data-filter=".hasd">Hasd</a></li>
</ul>
как сделать, чтоб при нажатии на первую ссылку, появлялся блок с текстом
Текст1, при клике на вторую ссылку
Текст2 , грузиться второй блок, удаляя при этом блок 1. и т.д с каждой, один блок загружается , другие убираются ?

danik.js · #2 (**permalink**) 27.10.2014, 21:24

Грузится откуда? Блоки много текста содержат?

AdDa · #3 (**permalink**) 27.10.2014, 21:36

Текста 3-4 предложения.
они не грузятся откуда то. просто один появляется, другой принимает свойство display:none к примеру

рони · #4 (**permalink**) 27.10.2014, 21:42

AdDa,
таких именно открывашек 100500 на форуме -- а поискать?

AdDa · #5 (**permalink**) 27.10.2014, 21:50

Искал, не те попадались какие то..

рони · #6 (**permalink**) 27.10.2014, 22:00

AdDa,
100501

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  p  {
    display: none;
  }
 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $("a[data-filter]"), p = $('p[class^="h"]');
	   s.click(function(event) {
	     event.preventDefault();
	     var filter = $(this).data("filter");
	     p.stop().not(filter).hide();
	     p.filter(filter).fadeToggle(1500);
      });
});
  </script>
</head>

<body>
<ul>
 <li><a class="" href="#"data-filter=".h">H</a></li>
 <li><a class="" href="#"data-filter=".ha">Ha</a></li>
 <li><a class="" href="#"data-filter=".has">Has</a></li>
 <li><a class="" href="#"data-filter=".hasd">Hasd</a></li>
 </ul>
 <p class="h">Текст h</p>
 <p class="ha">Текст ha</p>
 <p class="has">Текст has</p>
 <p class="hasd">Текст hasd</p>
</body>

</html>

AdDa · #7 (**permalink**) 27.10.2014, 22:02

ТО что НАДО Бро! )
Спасиб огромное!

danik.js · #8 (**permalink**) 27.10.2014, 22:11

А почему бы вместо class не использовать id, а в ссылках, вместо data-filter писать href="#has" ? Зачем придумывать велосипед?

AdDa · #9 (**permalink**) 27.10.2014, 22:25

Рони, извини, у меня кароч с фильтрами в моем дОке не пашет, там уже используются фильтры и оно перебивается там...

<ul id="filters" class="unstyled">
<li><a href="#" data-filter="*" class="selected hasd">Все вертикальные</a></li>
<li><a href="# "data-filter=".Briz_category" id="Briz_category">Бриз</a></li>
<li><a href="# "data-filter=".Multifakturnye_category">Мульти</a></li>
<li><a href="# "data-filter=".fotonan_category">Фото</a></li>
</ul>
это сортировка фотографий,... и вот при нажатии на каждую из ссылок
подгружаются фото и надо чтоб сверху подгружался Текст описания Текст

рони · #10 (**permalink**) 27.10.2014, 23:01

AdDa,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

не понял ни тебя ни danik.js,
danik.js, если вам нетрудно сделайте кодом, про что вы сказали
AdDa, сделайте тоже макет.

Форум

Справочник

Discord чат

Курсы javascript