Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2013, 14:30
Новичок на форуме
Отправить личное сообщение для Lastedl Посмотреть профиль Найти все сообщения от Lastedl
 
Регистрация: 02.12.2013
Сообщений: 5

Изменение цвета ссылок на одной странице
Имеется страница с блоками, которые открываются по нажатию на ссылки, надо сделать, чтобы при открытии страницы, первая ссылка была уже выделена другим цветом, а при нажатии на вторую цвет у первой сбрасывался, а на второй менялся и наоборот.
Подскажите пожалуйста как такое реализовать, может похожие примеры есть, где нибудь?
Сами блоки:
<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>
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2013, 20:36
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

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>

Последний раз редактировалось lord2kim, 09.12.2013 в 15:21.
Ответить с цитированием
  #3 (permalink)  
Старый 08.12.2013, 21:27
Новичок на форуме
Отправить личное сообщение для Lastedl Посмотреть профиль Найти все сообщения от Lastedl
 
Регистрация: 02.12.2013
Сообщений: 5

Спасибо, только вот, что-то не получается сделать для 7 блоков. Меняется только цвет ссылок, а содержание блоков, кроме 1 и 2, не показывает.
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2013, 10:35
Новичок на форуме
Отправить личное сообщение для Lastedl Посмотреть профиль Найти все сообщения от Lastedl
 
Регистрация: 02.12.2013
Сообщений: 5

Может тут не правильно считается их количество?
for (i = 0; i < link.parentNode.getElementsByTagName("a").length; i++)
Ответить с цитированием
  #5 (permalink)  
Старый 09.12.2013, 15:20
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Lastedl, ну да, так и есть...
изменил пример выше для 4-х блоков...
Ответить с цитированием
  #6 (permalink)  
Старый 09.12.2013, 15:51
Новичок на форуме
Отправить личное сообщение для Lastedl Посмотреть профиль Найти все сообщения от Lastedl
 
Регистрация: 02.12.2013
Сообщений: 5

Огромное спасибо, все работает, нашел свою ошибку.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение цвета слова на странице archer Элементы интерфейса 12 30.07.2013 20:30
Несколько версий JQuery UI на одной странице. Casufi jQuery 2 10.11.2012 15:24
Изменение цвета ссылок при наведении на другую облсть iHun jQuery 6 15.05.2012 19:52
Как сделать 2 галереи JQuery на одной странице? orendzi jQuery 8 16.07.2011 15:22
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 01:46