Только один из трех элементов может быть активен
добрый день!
Ситуация следующая: есть три элемента "Text" и три картинки. Картинки все распологаются в одном месте. При клике на Text1 отображается картинка 1, при клике на Text2 - картинка 2 и на Text3 - картинка три соответственно. При клике на Text - текст меняет цвет с черного на красный. Задача: Только один текст и соответствующая ему картинка могут быть активны, Т.е. сначала нажали на текст1 - тест изменил цвет на красный, появилась картинка 1. Нажимаем на текст2 - он подсвечивается красным и появляется картинка 2, при этом картинка 1 пропадает и текст1 становится черным ("не активный"). С трейтим текстом и картинкой такая же история. Т.е. только один текст из трех может быть активен и при этом отображается картинка, которая соответствует тексту. В аттаче - пример, подскажите, что нужно добавить, что бы текст и картинка были активны только те, которые выбраны, а остальные были неактивны (значения обнулялись). Спасибо большое за помощь!:) |
Запостите код здесь, обрамив в [НTML] .. [/html] тег. Или в песочнице http://learn.javascript.ru/play или на jsfiddle.net .
|
|
Для каждого Text следующая ф-ция:
(function(symbolName){Symbol.bindElementAction(com pId,symbolName,"${_Text1}","click",function(sym,e) {sym.$("Text1").css('color','#ff0000');sym.$("Koal a").css('opacity',1);}); т.е. при клике на текст элемент меняет цвет и опасити для картинки менятся с 0 на 1. Для того, чтобы только один был элемент активный - для каждого текст я могу прописать дополнительно: (function(symbolName){Symbol.bindElementAction(com pId,symbolName,"${_Text1}","click",function(sym,e) {sym.$("Text3").css('color','#000000');sym.$("Img3 ").css('opacity',0);}); но минус в том, что если на странице много элементов, например, 10 - то код становитс грамоздким. Можно ли написать JS чтобы он автоматически обнулял значения для остальных элементов? |
Volchen0ck,
По клику к текущему элементу добавляете класс "active" Клик функция такого вида $("elem:not(.active)").on('click',function() { $("elem").removeClass('active').... //тут убираем свойства активности у Всех; $(this).addClass('active').... .//тут добавляем свойство активности у текущего // Тут Доп. функции, если есть }); Пример $("elem:not(.active)").on('click',function() { $("elem").removeClass('active').hide(); $(this).addClass('active').show(1000) }); |
Спасибо большое за помощь! :)
|
Часовой пояс GMT +3, время: 02:45. |