Next Generation CMS :: Форум поддержки

bestxp

Участник

Откуда: Россия

Здесь с 2008-10-13

Сообщений: 133

Рейтинг :   1 

Сайт

Java Script

Так как я с этим чудищем не дружу у меня пара вопросов к знатокам,
точнее как реализовать.
У меня есть несколько Кнопок(картинок), столько же div блоков сколько и кнопок,
кнопка имеет 2 состояния (активна и неактивна (2 картинки), они меняют своё состояние только при наведении на них,
то есть примерно получаеться так, загрузилась страничка у меня 7 кнопок(1 активна 6 неактивно) и 7 блоков (1 активно и 6 неактивны(display:none)), при наведени на другую кнопку она становиться активна и первая становиться неактивной, так же другой div блок виден, тот что первый был виден, становиться не видимый(текст изменился), навел на другую(текушая становиться активной, предыдущая неактивна) и тоже самое с Div блоком(ноый стал виден, другой невидим), получаеться
1блок привязан к 1кнопке, 2ой блок к 2ой кнопке и так далее,
подскажите пожайлуста с реализацией..

---

senior php and js developer

vitaly

Администратор

Откуда: Россия

Здесь с 2008-10-08

Сообщений: 2,788

Рейтинг :   115 

Re: Java Script

Можно сделать так:

1. Функция, которая показывает один блок, скрывая остальные. Заодно - выделяя активную кнопку
ID блоков должно быть вида block_ЦИФРА, кнопок - button_ЦИФРА, где ЦИФРА - от 1 до 7 (если надо больше или меньше - меняешь в коде функции).

<script language="javascript">
function selectElement(num) {
 var i;
 for (i=1; i<=7; i++) {
  document.getElementById('block_'+i).style.display=(i==num)?'':'none';
  document.getElementById('button_'+i).style.fontWeight=(i==num)?'bold':'normal';
 }
}
</script>

2. А вот HTML код:

<input type="button" id="button_1" value="Блок 1" onclick="selectElement(1)"/>
<input type="button" id="button_2" value="Блок 2" onclick="selectElement(2)"/>
...
<input type="button" id="button_7" value="Блок 7" onclick="selectElement(7)"/>

<div id="block_1">Данные блока 1</div>
<div id="block_2">Данные блока 2</div>
...
<div id="block_7">Данные блока 7</div>