| |
|
|
| | Ребята, подскажите скрипт для плавного отображение скрытия блока div по нажатию на ссылку... | |
| |
|
|
| |
|
|
| |
для: OLi
(19.03.2011 в 00:48)
| | | Принцип см. здесь - уберите из скрипта всё, касающееся ширины (obj.style.width...) и установите для прозрачности (OPC) нужные Вам начальные и конечные значения. | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(19.03.2011 в 00:56)
| | | интересный пример. но что если не известно значение ширины? | |
| |
|
|
| |
|
|
| |
для: OLi
(19.03.2011 в 00:48)
| | |
<html>
<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("A#trigger").toggle(function() {
//Отображаем скрытый блок
$("DIV#box").fadeIn();
return false;
},
function() {
//Прячем скрытый блок
$("DIV#box").fadeOut();
return false;
});//end of toggle()
});//end of ready()
</script>
</head>
<body>
<a href='#' id='trigger'>Ссылка</a>
<div id='box' style='display: none;'>Блок</div>
</body>
</html>
|
Вам не обязательно владеть jQuery - можете просто взять скрипт и использовать его. Только не забудьте скачать и присоединить jQuery.
В данном примере предполагается, что блок у вас первоначально скрыт. Если он у вас первоначально показан, то поменяйте $("DIV#box").fadeIn(); и $("DIV#box").fadeOut(); местами. | |
| |
|
|
| |
|
|
| |
для: Ирбис
(19.03.2011 в 08:12)
| | | А если несколько блоков по отдельности открывать тогда функцию повторять заново уже для другого id? | |
| |
|
|
| |
|
|
| |
для: OLi
(19.03.2011 в 10:01)
| | | Лучше не повторять, а сделать например вот так:
<html>
<head>
<style type='text/css'>
DIV.box {
display: none;
}
A.trigger {
display: block;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("A.trigger").toggle(function() {
//Отображаем скрытый блок
$(this).next().fadeIn();
return false;
},
function() {
//Прячем скрытый блок
$(this).next().fadeOut();
return false;
});//end of toggle()
});//end of ready()
</script>
</head>
<body>
<a href='#' class='trigger'>Ссылка 1</a>
<div class='box'>Блок 1</div>
<a href='#' class='trigger'>Ссылка 2</a>
<div class='box'>Блок 2</div>
<a href='#' class='trigger'>Ссылка 3</a>
<div class='box'>Блок 3</div>
</body>
</html>
|
В данном примере важно, чтобы блок следовал сразу за ссылкой, т.е. чтобы между ними не было других тегов и чтобы блок и ссылка были родственными элементами. При этом класс блоку (box) нужен только для применения стилей к блоку, JS в данном случаи класс не важен.
Если такое условие не устраивает, то приведите свой HTML код, чтобы было понятно как следует действовать в вашем конкретном случаи. | |
| |
|
|
| |
|
|
| |
для: Ирбис
(19.03.2011 в 10:23)
| | | Одно уточнение: поисковики скорее всего не проиндексируют контент, содержащийся в блоках со свойством display: none; Поэтому лучше подкорректировать скрипт так:
<style type='text/css'>
/*Убираем свойство display:none;*/
DIV.box {
}
A.trigger {
display: block;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
//Скрываем блоки после загрузки страницы
$("DIV.box").hide();
.........
|
| |
| |
|
|
| |
|
|
| |
для: Ирбис
(19.03.2011 в 10:59)
| | | Есть 5 ссылок друг под другом под каждой из которых скрытый блок div, который должен отобразиться при клику на соответствующую ссылку
<a href="#" id="trigger" class="mn">Офисы/Филиалы/Торговые точки</a>
<div></div>
<a href="#" id="trigger" class="mn">Офисы/Филиалы/Торговые точки</a>
<div></div>
И так же надо по отдельному клику на каждую скрыть блок
А для ссылки Отобразить все - раскрыть все блоки..
Вот что необходимо.. | |
| |
|
|
| |
|
|
| |
для: OLi
(19.03.2011 в 12:43)
| | |
<html>
<head>
<style type='text/css'>
A.mn {
display: block;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
//После загрузки страницы прячем все блоки
$("DIV.box").hide();
$("A.mn").click(function() {
//Если блок скрыт - отобразим его
if($(this).next().css("display") == "none") {
$(this).next().fadeIn();
}
//Если блок отображен - скроем его
else {
$(this).next().fadeOut();
}
});//end of click()
//По клику на ссылке "Отобразить все" разворачиваем все блоки
$("A.showAll").click(function() {
$("DIV.box").fadeIn();
});//end of click()
});//end of ready()
</script>
</head>
<body>
<a href='#' class='showAll'>Отобразить все</a>
<br>
<br>
<a href='#' class='mn'>Ссылка 1</a>
<div class='box'>Блок 1</div>
<a href='#' class='mn'>Ссылка 2</a>
<div class='box'>Блок 2</div>
<a href='#' class='mn'>Ссылка 3</a>
<div class='box'>Блок 3</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Ирбис
(19.03.2011 в 13:25)
| | | ооо супер..Благодарчик...Правда кнопка Отобразить все не срабатывает | |
| |
|
|
| |
|
|
| |
для: OLi
(19.03.2011 в 15:36)
| | | Еще вопрос к спецам как по клику на отображение блока - перевести пользователя на него типа якоря | |
| |
|
|
| |
|
|
| |
для: OLi
(19.03.2011 в 15:36)
| | | Вот полностью работающий пример:
http://irbis09.jino.ru/test/
Посмотрите его исходный код, сравните со своим. | |
| |
|
|
| |
|
|
| |
для: Ирбис
(19.03.2011 в 16:29)
| | | Странно вроде все тоже самое: | |
| |
|
|
| |
|
|
| |
для: OLi
(19.03.2011 в 17:52)
| | | Внимательно проверьте имена всех классов в HTML и JavaScript коде | |
| |
|
|
| |
|
|
| |
для: Ирбис
(20.03.2011 в 01:21)
| | | Приведу код:
<a href="#" id="open_all" class="showAll">Открыть все</a>
<script type="text/javascript">
$(document).ready(function() {
//После загрузки страницы прячем все блоки
$("div.box").hide();
$("A.mn").click(function() {
//Если блок скрыт - отобразим его
if($(this).next().css("display") == "none") {
$(this).next().fadeIn();
}
//Если блок отображен - скроем его
else {
$(this).next().fadeOut();
}
});//end of click()
//По клику на ссылке "Отобразить все" разворачиваем все блоки
$("A.showAll").click(function() {
$("div.box").fadeIn();
});//end of click()
});//end of ready()
</script>
|
<div id="box" style="display: none;">
<form action="#" method="post" enctype="multipart/form-data">
<div><label>Форма собственности</label><select>
<option value="1">ООО</option>
<option value="14">Добавить</option>
</select>
</div>
<div><label>Название фирмы</label><input type="name_f" id="name_f_a" /></div>
<div><label>Логотип фирмы</label><input type="file" value="Загрузить" /><br /><span>Дождитесь появления фото на странице, иначе не загрузится!</span></div>
<div><label>О предприятии</label><textarea name="about_f"></textarea><br /><span>Информация о Вашем предприятии: Дата создания, периоды развития, коллектив, партеры, клиенты, лицензии, дипломы и награды…
(Контактную информацию не указывайте – заполняется ниже)
</span></div>
<p><b style="color:#FF0000; font-weight:bold">*</b> В случаи не заполнение данного раздела сейчас – это можно будет сделать позже воспользовавшись вызовом нашего представителя Редактировать </p>
</form>
</div>
|
Вроде везде все совпадает по именам классов...не знаю в чем проблема... | |
| |
|
|
| |
|
|
| |
для: OLi
(20.03.2011 в 19:26)
| | | Проблема в том, что у вас в HTML-коде блоки, которые необходимо скрыть/отобразить имеют идентификаторы box:
А JS код пытается работать с классами box:
//По клику на ссылке "Отобразить все" разворачиваем все блоки
$("A.showAll").click(function() {
$("div.box").fadeIn();
});//end of click()
|
Вот этот фрагмент $("div.box") извлекает все блоки DIV с классом box. Но поскольку таких на вашей странице нет, то ничего и не работает.
Измените все id='box' на class='box' и JS код заработает.
Также следует учитывать, что идентификаторы должны быть уникальными на странице, т.е. на странице не должно быть 2-х и более тегов с одним и тем же идентификатором.
Если у вас часто возникают такие задачи как выбор элементов на странице, изменение свойств элементов, скрытие/отображение/перемещение элементов, то я вам горячо рекомендую освоить jQuery. С помощью неё эти задачи решаются на раз-два. | |
| |
|
|
| |
|
|
| |
для: Ирбис
(21.03.2011 в 11:10)
| | | Спасибо, все заработало....еще один вопрос, как изменить текст на СКРЫТЬ все после того как нажали ОТКРЫТЬ ВСЕ? чтоб повторно по клику уже блоки все сворачивались?! | |
| |
|
|
| |
|
|
| |
для: OLi
(21.03.2011 в 20:11)
| | | Вот этот участок:
//По клику на ссылке "Отобразить все" разворачиваем все блоки
$("A.showAll").click(function() {
$("div.box").fadeIn();
});//end of click()
|
Замените на это:
//По клику на ссылке отображаем либо скрываем блоки
$("A.showAll").toggle(function() {
$("div.box").fadeIn();
$(this).html("Скрыть все");
},
function() {
$("div.box").fadeOut();
$(this).html("Отобразить все");
});//end of toggle()
|
| |
| |
|
|
