Начнём с того, что раз уж речь идёт о переключении классов, то уместно сразу все стили записать в CSS:
.bImg { /* сюда вписываем стиль обычного div */ }
.vImg { /* сюда вписываем стиль div, жмякнутого мышою */ }
Для элементов
<div> после этого достаточно указывать классы
(class="..." вместо
style="...").
Затем при помощи библиотеки
jQuery можно немало упростить себе задачу.
Во-первых, можно сделать проще
HTML-код:
- Не придётся вписывать в него обработчики onclick, потому что они будут назначены позже, джаваскриптом.
- Не придётся и вписывать в него id, так как jQuery исполняет обработчики в контексте элементов: this указывает в обработчике на жмякнутый элемент.
Было так:
<div id="1" style="b-img" onclick="kodimg(id)">...</div>
<div id="2" style="b-img" onclick="kodimg(id)">...</div>
<div id="3" style="b-img" onclick="kodimg(id)">...</div>
<div id="4" style="b-img" onclick="kodimg(id)">...</div>
<div id="5" style="b-img" onclick="kodimg(id)">...</div>
Стало так:
<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>
Во-вторых, желаемое достигается простым
JS-кодом для jQuery:
$(function(){
// после загрузки документа назначаем обработчики событий:
$('div.bImg').click(function(){
// в обработчике делаем две вещи:
// 1) находим предыдущий жмякнутый div, отменяем жмякнутость
$('div.vImg').removeClass('vImg').addClass('bImg');
// 2) свежежмякнутому div придаём жмякнутость
$(this).removeClass('bImg').addClass('vImg');
});
});
