Пятница, 26.04.2024, 14:56       
ПлёнкаCut.moy.su
С Днём Победы 9 мая!

Категории раздела


Форма входа

Статистика сайта
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Кто нас сегодня посетил
Сейчас Онлайн
Счетчики
измерьте скорость интернета Яндекс.Метрика
Яндекс цитирования
Главная » Файлы » Всё для Ucoz » Скрипты

Показать Скрыть текст. Показать Спрятать Div. JavaScript
10.03.2012, 11:58

Иногда есть необходимость показать какой-либо текст нажав на ссылочку, при этом не перезагружая страницу. Сделать это легко с помощью javascript. Пишем вот такой простой скрипт:


<script>
functionlook(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
</script>
<a href="javascript:look('div1');">показать/скрыть</a>
<div id="div1" style="display:none">
Скрытый текст
</div>
 

Если у вас таких блоков больше чем один, просто меняйте ID DIV. Можно указать не только цифру, вы можете написать что-нибудь, так будет потом проще разобраться.

Есть другой вариант. При нажатии на ссылку меняется надпись "ПОКАЗАТЬ-СКРЫТЬ"

<script> 

functionon(n){
eval("document.all.text"+n+".style.display='block';");
eval("document.all.ontext"+n+".style.display='none';");
eval("document.all.offtext"+n+".style.display='inline';");
}
functionoff(n){
eval("document.all.text"+n+".style.display='none';");
eval("document.all.ontext"+n+".style.display='inline';");
eval("document.all.offtext"+n+".style.display='none';");
}
</script>
<!-- Скрытый текст 
-->
<div id='text1' style='display: none;'>
Скрытый текст
</div>

<span id='ontext1' style='display: inline;'>
<a href="javascript:on('1');">подробнее</a>
</span>
<span id='offtext1' style='display: none;'>
<a href="javascript:off('1');">кратко</a>
</span>

Есть третий вариант, очень красивый, для его реализации нам понадобится скрипт jquery.js
Подгружаем скрипт:

<script type="text/javascript" src="jquery.js"></script>

Создаем стиль для блоков с появляющимся текстом:

.opis{display:none;text-align: justify;}

Далее скрытый текст:

<div class="opis" id="opis1">
Скрытый текст
</div>
<a href="javascript:void(0)" id="opislink1">подробнее</a>

Затем скрипт:

<script type="text/javascript">
$(document).ready(function() {$('#opislink1').click(function() {
if ( jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
if ($('#opis1').css("display")=="block") {$('#opis1').css("display", "none");
} else {$('#opis1').css("display", "block");
}
} else {$('#opis1').toggle("slow");
}
if ($('#opislink1').text()=='подробнее') {$('#opislink1').text('кратко');
} else {$('#opislink1').text('подробнее');
}
});
});
</script>

Этот вариант может не работать в старых версиях IE

Категория: Скрипты | Добавил: Greyness
Просмотров: 6715 | Загрузок: 0 | Рейтинг: 3.5/2
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Вверх
Cut.moy.su © 2012-2024