[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Вывести блок при клике на ссылку
sanchahous
Всем привет. Дали задание, к сожалению с java у меня пока сложно. Есть две ссылки при нажатие одна выводит текст, а вторая неактивная скрывает. Сказали что Java скриптом реализовуется. Тоесть нужно как-то связать ссылку с блоком я так понимаю. Может кто подсказать как это сделать. Вот есть скриншот подписал примерно что надо.
2 ссылки:

<ul>
<li><a
href="#">О нас</a></li>
<li><span><a
href="#">Помощь</a></span></li>
</ul>


текстовый блок:

<p id="about">Вы всегда можете <span><a href="#">поддержать</a></span> наш ресурс,
удобным для вас способом. Средства пойдут
на оплату трудов редакции и расширении
линейки материалов.
</p>

<p id="help">Вы всегда можете <span><a href="#">поддержать</a></span> наш ресурс,
второй блок с текстом, второй блок с текстом, второй блок с текстом, второй блок с текстом,
</p>
sanchahous
Так ладно сам уже нашел выглядет так:
<ul>
<li><a
href="#" id="about">О нас</a></li>
<li><span><a
href="#" id="help">Помощь</a></span></li>
</ul>

<p
class="visible" id="about-text">Вы всегда можете <span><a href="#">поддержать</a></span> наш ресурс,
удобным для вас способом. Средства пойдут
на оплату трудов редакции и расширении
линейки материалов. </p>
<p
class="hidden" id="help-text">Вы всегда можете <span><a href="#">поддержать</a></span> наш ресурс,
уgdfgdfgdfgdfgdfgdfgdfту трудов редакции и расширении
линейки материалов. </p>


<script type="text/javascript">
var aboutText = document.getElementById('about-text');
var helpText = document.getElementById('help-text');

var about = document.getElementById('about');
var help = document.getElementById('help');

about.onclick = function() {
helpText.setAttribute('class', 'hidden');
aboutText.setAttribute('class', 'visible');
};

help.onclick = function() {
aboutText.setAttribute('class', 'hidden');
helpText.setAttribute('class', 'visible');
};
</
script>
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.