Мир ВебМастера
Меню сайта
Категории каталога
Текстовые эффекты [10]
Визуальные эффекты [10]
Игры на javascript [10]
Курсоры [10]
Часы и Календари [9]
Меню навигации [1]
Случайный вывод [4]
Скроллинг [3]
Скрипты AJAX [16]
Скрипты Java [32]
Sundry [40]
Главная » Файлы » СКРИПТЫ » Скрипты Java

show/hide для контента или блока ссылок
Бесплатная раскрутка сайта
[ ] 16.12.2010, 03:28


show/hide для контента или блока ссылок



Блок ссылок 1 (картинки)


Блок ссылок 2 (текстовые)

Исходный код этого примера:
<style>
.myViewLinks { display: none; }
</style>

<script>
 // Обворачиваем функцию toggle в локальное замыкание:
var toggle = function() {
 // Ссылка на текущий открытый div:
 var currentDiv = null;

 // Функция для "раскрытия" элемента:
 function open(divElement) {
 // Тут можно добавить эффект "плавного" открытия:
 divElement.style.display = "block";
 currentDiv = divElement;
 }

 // Функция для "закрытия" элемента:
 function close(divElement) {
 // Тут можно добавить эффект "плавного" закрытия:
 divElement.style.display = "none";
 currentDiv = null;
 }

 // Возвращаем функцию, которая будет вызываться по toggle()
 return function(divID) {
 // Получаем элемент из DOM
 var divElement = document.getElementById(divID);
 // Если такой есть:
 if (divElement) {
 // Если уже открыт этот div, то просто закрываем.
 if (divElement === currentDiv) {
 close(currentDiv);
 // Если открыт другой div, то закрываем и открываем текущий:
 } else if(currentDiv != null) {
 close(currentDiv);
 open(divElement);
 // Иначе - просто открываем:
 } else open(divElement);
 }
 }
 // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
 }();
</script>
<a href="javascript://" onClick="toggle('div1');return false;">Блок ссылок 1 (картинки)</a>
<div class="myViewLinks" id="div1">
 <img src="http://ironscorpio.my1.ru/" target="_blank"><img src="http://ironscorpio.my1.ru/images/bullet.gif" alt="image 1"> Part 1<br />
 <img src="http://ironscorpio.my1.ru/" target="_blank"><img src="http://ironscorpio.my1.ru/images/bullet.gif" alt="image 1"> Part 2<br />
 <img src="http://ironscorpio.my1.ru/" target="_blank"><img src="http://ironscorpio.my1.ru/images/bullet.gif" alt="image 1"> Part 3<br />
 <img src="http://ironscorpio.my1.ru/" target="_blank"><img src="http://ironscorpio.my1.ru/images/bullet.gif" alt="image 1"> Part 4<br />
</div>
<br />

<a href="javascript://" onClick="toggle('div2');return false;">Блок ссылок 2 (текстовые)</a>
<div class="myViewLinks" id="div2">
 <strong>Категория 1:</strong>
 <ol>
 <li><a href="http://ironscorpio.my1.ru/">Part 1</a></li>
 <li><a href="http://ironscorpio.my1.ru/seo-tutorial.html" >Part 2</a></li>
 <li><a href="http://ironscorpio.my1.ru/index/0-74" >Part 3</a></li>
 <li><a href="http://ironscorpio.my1.ru/promote.html" >Part 4</a></li>
 <li><a href="http://ironscorpio.my1.ru/publ/4" >Part 5</a></li>
 </ol>
 <strong>Категория 2:</strong>
 <ol>
 <li><a href="http://ironscorpio.my1.ru/" >Part 1</a></li>
 <li><a href="http://ironscorpio.my1.ru/forum/" >Part 2</a></li>
 <li><a href="http://ironscorpio.my1.ru/publ/8" >Part 3</a></li>
 <li><a href="http://ironscorpio.my1.ru/load/2" >Part 4</a></li>
 <li><a href="http://ironscorpio.my1.ru/board/" >Part 5</a></li>
 </ol>
</div>



Категория: Скрипты Java | Добавил: max
Просмотров: 1130 | Загрузок: 0 |
Всего комментариев: 0








avatar
Форма входа
Поиск
Друзья сайта
Статистика
p
IP:54.235.48.106


Здесь и Сейчас: 1
Прохожих: 1
VIP: 0
l
n


Copyright Мир ВебМастера © 2018