Изменение цвета ссылок на одной странице
Имеется страница с блоками, которые открываются по нажатию на ссылки, надо сделать, чтобы при открытии страницы, первая ссылка была уже выделена другим цветом, а при нажатии на вторую цвет у первой сбрасывался, а на второй менялся и наоборот.
Подскажите пожалуйста как такое реализовать, может похожие примеры есть, где нибудь? Сами блоки: <a href="javascript: displ('1')">1 </a> | <a href="javascript: displ('2')">2 </a> <div id="d1" style="display: block;"> <p > 1</p> </div> <div id="d2" style="display: none;" > <p>2</p> </div> Скрипт который их переключает: <script type="text/javascript"> function displ(b) { for (var a = 1; a < 3; a++) document.getElementById("d" + a).style.display = "none"; document.getElementById("d" + b).style.display = "block" }; </script> |
Lastedl,
<style type="text/css"> a.a1 { color: green; } a.a2 { color: violet; } </style> <script type="text/javascript"> function displ(b, link) { for (i = 0; i < link.parentNode.getElementsByTagName("a").length; i++) { document.getElementById("d" + (i+1)).style.display = "none"; link.parentNode.getElementsByTagName("a")[i].className = "a1"; } document.getElementById("d" + b).style.display = "block"; link.className = "a2"; }; window.onload = function() { document.getElementById("linkList").getElementsByTagName("a")[0].click(); } </script> <div id="linkList"><a href="#" onClick="displ('1', this);" class="a1">1</a> | <a href="#" onClick="displ('2', this);" class="a1">2</a> | <a href="#" onClick="displ('3', this);" class="a1">3</a> | <a href="#" onClick="displ('4', this);" class="a1">4</a></div> <div id="d1" style="display: none;"> <p > 1</p> </div> <div id="d2" style="display: none;" > <p>2</p> </div> <div id="d3" style="display: none;" > <p>3</p> </div> <div id="d4" style="display: none;" > <p>4</p> </div> |
Спасибо, только вот, что-то не получается сделать для 7 блоков. Меняется только цвет ссылок, а содержание блоков, кроме 1 и 2, не показывает.
|
Может тут не правильно считается их количество?
for (i = 0; i < link.parentNode.getElementsByTagName("a").length; i++) |
Lastedl, ну да, так и есть...
изменил пример выше для 4-х блоков... |
Огромное спасибо, все работает, нашел свою ошибку.
|
Часовой пояс GMT +3, время: 00:39. |