Загрузка и удаление содержимого
Имеется 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. и т.д с каждой, один блок загружается , другие убираются ? |
Грузится откуда? Блоки много текста содержат?
|
Текста 3-4 предложения.
они не грузятся откуда то. просто один появляется, другой принимает свойство display:none к примеру |
AdDa,
таких именно открывашек 100500 на форуме -- а поискать? |
Искал, не те попадались какие то..
|
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>
|
ТО что НАДО Бро! )
Спасиб огромное! |
А почему бы вместо class не использовать id, а в ссылках, вместо data-filter писать href="#has" ? Зачем придумывать велосипед?
|
Рони, извини, у меня кароч с фильтрами в моем дОке не пашет, там уже используются фильтры и оно перебивается там...
<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> |
AdDa,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. не понял ни тебя ни danik.js, danik.js, если вам нетрудно сделайте кодом, про что вы сказали AdDa, сделайте тоже макет. |
| Часовой пояс GMT +3, время: 21:30. |