Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   помогите упростить код (https://javascript.ru/forum/jquery/48481-pomogite-uprostit-kod.html)

sarkis28 05.07.2014 20:02

помогите упростить код
 
Новичок в жквери..
есть три кнопки :
<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 кнопки остаются .Т.е писать придется для каждой .
Как грамотно оформить ?
Спасибо.

рони 05.07.2014 20:21

sarkis28,
$(function(){
       var s = $("span");
	   s.click(function() {
	     s.not(this).removeClass("orange");
	     $(this).toggleClass("orange");
      });
});

sarkis28 05.07.2014 21:26

Спасибо за этот ответ ..Помогло ..
Еще вопрос :
у меня при клике на определенную кнопку должен добавляться класс 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");
      });
});


Но тогда все три элемента начинают отображаться ..

рони 05.07.2014 21:50

Цитата:

Сообщение от sarkis28
Еще вопрос :

неосилил ваш вопрос
а ещё проще можно написать?
может вы меню мастерите -- так их 100500 на форуме.

sarkis28 05.07.2014 22:09

Сорри за не ясность ..Попробую проще написать ..
Смотрите :

это меню из трех кнопок , которые ранее вы уже мне писали , как сделать ..
За каждой этой кнопкой появляется текст снизу ..По умолчанию выбрана 1я кнопка и виден ее текст ...

а вообще , я нарисовал ..:thanks: https://cloclo1.datacloudmail.ru/vie...2803%40mail.ru

sarkis28 05.07.2014 22:10

рони,
если где-то уже было такое - киньте ссылочку , а то не могу построить поисковой запрос

рони 05.07.2014 22:25

Цитата:

Сообщение от sarkis28
я нарисовал

и где картинка?
может html нормальный где будет понятно что такое ваш тест за кнопкой

sarkis28 05.07.2014 22:30

рони,
попробуйте по этой ссылке увидеть рисунок
https://cloud.mail.ru/public/f127dc5...0%B5%D1%80.png

sarkis28 05.07.2014 22:31

вот конструкция моего меню..
<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>

sarkis28 05.07.2014 22:33

ORANGE- добавляет цвет к кнопкам
SHOW - делает видимым блоки info_show


Часовой пояс GMT +3, время: 02:07.