Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Загрузка и удаление содержимого (https://javascript.ru/forum/misc/51180-zagruzka-i-udalenie-soderzhimogo.html)

AdDa 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>
как сделать, чтоб при нажатии на первую ссылку, появлялся блок с текстом
<p class="h">Текст1</p>, при клике на вторую ссылку
<p class="ha">Текст2</p> , грузиться второй блок, удаляя при этом блок 1. и т.д с каждой, один блок загружается , другие убираются ?

danik.js 27.10.2014 21:24

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

AdDa 27.10.2014 21:36

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

рони 27.10.2014 21:42

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

AdDa 27.10.2014 21:50

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

рони 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 27.10.2014 22:02

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

danik.js 27.10.2014 22:11

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

AdDa 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>
это сортировка фотографий,... и вот при нажатии на каждую из ссылок
подгружаются фото и надо чтоб сверху подгружался Текст описания <p>Текст</p>

рони 27.10.2014 23:01

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

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


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

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


Часовой пояс GMT +3, время: 00:27.