помогите упростить код
Новичок в жквери..
есть три кнопки : <span class='info orange'>Информация</span> <span class='action'>Активность</span> <span class='config'>Настройки</span> смысл такой : кликаю на кнопку , к ней добавляется класс orange(на первой кнопке по умолчанию).Соответственно , кликаю по другой , с первой orange удаляется ,а ко второй добавляется .. Вот код : $(function(){ $(".action").click(function() { $(".action").addClass('orange'); $(".info").removeClass('orange'); }); }); это я описал клик на ACTION , а у меня еще 2 кнопки остаются .Т.е писать придется для каждой . Как грамотно оформить ? Спасибо. |
sarkis28,
$(function(){ var s = $("span"); s.click(function() { s.not(this).removeClass("orange"); $(this).toggleClass("orange"); }); }); |
Спасибо за этот ответ ..Помогло ..
Еще вопрос : у меня при клике на определенную кнопку должен добавляться класс show ко след. элементам (они скрыты по умолчанию , кроме первого): <div class='main'> <span class='info_show show'>1</span> <span class='action_show'>2</span> <span class='config_show'>3</span> </div> Как можно это реализовать , использую ту схему , которую описали ранее.. делаю вот так : $(function(){ var s = $("span"); s.click(function() { s.not(this).removeClass("orange"); $(this).toggleClass("orange"); $(".main span").addClass("show"); }); }); Но тогда все три элемента начинают отображаться .. |
Цитата:
а ещё проще можно написать? может вы меню мастерите -- так их 100500 на форуме. |
Сорри за не ясность ..Попробую проще написать ..
Смотрите : это меню из трех кнопок , которые ранее вы уже мне писали , как сделать .. За каждой этой кнопкой появляется текст снизу ..По умолчанию выбрана 1я кнопка и виден ее текст ... а вообще , я нарисовал ..:thanks: https://cloclo1.datacloudmail.ru/vie...2803%40mail.ru |
рони,
если где-то уже было такое - киньте ссылочку , а то не могу построить поисковой запрос |
Цитата:
может html нормальный где будет понятно что такое ваш тест за кнопкой |
рони,
попробуйте по этой ссылке увидеть рисунок https://cloud.mail.ru/public/f127dc5...0%B5%D1%80.png |
вот конструкция моего меню..
<div class='block_info_main'> <div class='first'> <span class='info orange'>Информация</span> <div class='main'> <span class='info_show show '>текст1</span> </div> </div> <div class='first'> <span class='info orange'>Информация2</span> <div class='main'> <span class='info_show '>текст2</span> </div> </div> <div class='first'> <span class='info orange'>Информация3</span> <div class='main'> <span class='info_show '>текст3</span> </div> </div> </div> |
ORANGE- добавляет цвет к кнопкам
SHOW - делает видимым блоки info_show |
Часовой пояс GMT +3, время: 02:07. |