| |
|
|
| | Добрый день, коллеги.
Задача такая: есть две ссылки (предположим link1 и link2) и два скрытых текста (text1 и text2). При нажатии по ссылке link1 должен появится text1, при нажатии на link2 - появиться text2 и исчезнуть text1.
Нашёл в инете кучу примеров, но там только появляется скрытый текст, но не исчезает уже открытый.
Как сделать это на PHP знаю, но там обновляется страница, а для меня это неприемлемо.
Выручите, плиз, господа!
Заранее благодарю. | |
| |
|
|
| |
|
|
| |
для: Nikitos82
(03.02.2011 в 13:53)
| | | Без изысков:
<a href='#'
onclick="getElementById('n2').style.display='none';
getElementById('n1').style.display='block';
return false;">
Первая
</a> /
<a href='#'
onclick="getElementById('n2').style.display='block';
getElementById('n1').style.display='none';
return false;">
Вторая
</a>
<div id=n1 style='display:none'>ПЕРВАЯ!</div>
<div id=n2 style='display:none'>ВТОРАЯ!</div>
|
| |
| |
|
|
| |
|
|
| |
для: Nikitos82
(03.02.2011 в 13:53)
| | | Простейший вариант может выглядеть следующим образом
<script language="javascript" type="text/javascript">
function show(id)
{
hide();
document.getElementById(id).style.display = 'block';
}
function hide()
{
document.getElementById('fst').style.display = 'none';
document.getElementById('snd').style.display = 'none';
}
</script>
<p><a href="#" onclick="show('fst')">текст1</a><br />
<a href="#" onclick="show('snd')">текст2</a></p>
<p style='display: none;' id='fst'>Первый текст</p>
<p style='display: none;' id='snd'>Второй текст</p>
|
| |
| |
|
|
| |
|
|
| |
для: cheops
(03.02.2011 в 14:11)
| | | Спасибо Вам огромное! Выручили! | |
| |
|
|
| |
|
|
| |
для: cheops
(03.02.2011 в 14:11)
| | | А подскажите ещё, пожалуйста, как сделать так, чтобы цвет нажатой ссылки менял цвет.
document.getElementById(id).style.color='#ff0000';
|
мне почему-то не помог :-( | |
| |
|
|
| |
|
|
| |
для: Nikitos82
(04.02.2011 в 01:01)
| | | Если вот это вот:
document.getElementById(id).style.color='#ff0000';
|
Вы используете в приведенном Хеопсом коде, то обратите внимание, что id в данном случае принадлежит не ссылке, а div, который один из появляющихся-исчезающих. Задача же не им менять цвет, так?
Поступаем так же цинично, на основании кода Игоря:
<script language="javascript" type="text/javascript">
function show(id)
{
hide();
document.getElementById(id).style.display = 'block';
t='l_'+id;
document.getElementById(t).style.color = 'red';
}
function hide()
{
document.getElementById('fst').style.display = 'none';
document.getElementById('snd').style.display = 'none';
document.getElementById('l_fst').style.color = 'blue';
document.getElementById('l_snd').style.color = 'blue';
}
</script>
<p><a href="#" id='l_fst' onclick="show('fst')">текст1</a><br />
<a href="#" id='l_snd' onclick="show('snd')">текст2</a></p>
<p style='display: none;' id='fst'>Первый текст</p>
<p style='display: none;' id='snd'>Второй текст</p>
|
| |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(04.02.2011 в 02:29)
| | | Имеем кучу ссылок и такую же кучу изначально спрятанных текстов в каких-то тегах.
Задача - обеспечить открытие только той ссылки, по которой последней кликнули и чтобы эта ссылка стала отличной от других (изменила цвет).
Доп/вопрос: а чё делать, если юзер СНОВА кликнет по той ссылке, коя уже показала текст?
Предложение: пусть вторичный клик по ссылке закроет показываемый текст.
Решение:
1. Ссылки и теги текстами именуем по следующей схеме: у ссылки id="lnk_номер", у соответствующего тега со спрятанным текстом id="txt_тот же номер"
Номер - натуральное число - от единицы, и хоть до миллиона. И можно не по порядку. Лишь бы все ссылки имели РАЗНЫЕ номера, а номера текстов соответствовали номерам ссылок. Соответственно, находиться ссылка и соответствующий её текст могут где угодно в пределах страницы.
2. Вводим глобальную переменную, коя будет помнить этот самый номер последней ссылки, которая "показала" свой текст.
Соответственно, если все ссылки закрыты (вначале или при повторном клике на одну и ту же ссылку, то эта глобальная переменная обнуляется.
3. На каждую ссылку вешаем обработчик, который должен вызвать функцию (одну) по клику и передать функции эту ссылку как объект. И должен вернуть false, чтобы страница не дёргалась в начало.
4. Отсюда код:
<script>
var GLOBAL = 0; //все тексты спрятаны
function SH (obj)
{
var nomer = obj.id.split ('_') [1]; //узнаём номер
if (GLOBAL) //если какой-то текст был уже ранее показан, то:
{
document.getElementById ('txt_' + GLOBAL).style.display = 'none'; //1. скрываем "прежний" открытый текст
document.getElementById ('lnk_' + GLOBAL).style.color = 'blue'; //2. возвращаем "прежней" ссылке обычный цвет
}
if (GLOBAL != nomer) //если не вторичный клик, то:
{
document.getElementById ('txt_' + nomer).style.display = 'inline'; //1. ОТкрываем "новый" текст
document.getElementById ('lnk_' + nomer).style.color = 'red'; //2. перекрашиваем "НОВУЮ" ссылку
GLOBAL = nomer; //запоминаем в глобальной переменной номер показываемого текста
}
else //если это "вторичный клик"
GLOBAL = 0; //текст-то у нас уже закрыт (в первом условии) и ссылка уже "перекрашена" в обычный цвет
return false; //отменяем переход по ссылке
}
</script>
<style>
a {color: blue} /*обычный цвет ссылок*/
span {display: none} /*теги, в которых спрятаны тексты*/
</style>
<a href="#" id="lnk_1" onclick="return SH (this)">Ссылка 1</a> <span id="txt_1">-- текст 1</span><br>
...<br>
<a href="#" id="lnk_89" onclick="return SH (this)">Ссылка 89</a><br>
...<br>
<a href="#" id="lnk_2345" onclick="return SH (this)">Ссылка 2345</a> <span id="txt_2345">-- текст 2345</span><br>
<span id="txt_89">-- текст 89</span>
|
[поправлено модератором] | |
| |
|
|
