Иногда
есть необходимость показать
какой-либо текст нажав на ссылочку, при этом не перезагружая страницу.
Сделать это легко с помощью 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
|