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

Заинтересовала наша система? Тогда этот форум для Вас!

rss

Вы не зашли.

Объявление

#1 2008-10-25 16:47:07

bestxp
Пользователь
Откуда: Россия
Зарегистрирован: 2008-10-13
Сообщений: 133
Рейтинг :   
Профиль  Вебсайт

Java Script

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


senior php and js developer

Неактивен

 

#2 2008-10-25 23:31:28

vitaly
Администратор
Откуда: Россия
Зарегистрирован: 2008-10-08
Сообщений: 2785
Рейтинг :   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>

Неактивен

 

Board footer

Powered by FluxBB

[ Generated in 0.005 seconds, 8 queries executed ]