Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2014, 20:02
Интересующийся
Отправить личное сообщение для sarkis28 Посмотреть профиль Найти все сообщения от sarkis28
 
Регистрация: 05.03.2014
Сообщений: 14

помогите упростить код
Новичок в жквери..
есть три кнопки :
<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 кнопки остаются .Т.е писать придется для каждой .
Как грамотно оформить ?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2014, 20:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,594

sarkis28,
$(function(){
       var s = $("span");
	   s.click(function() {
	     s.not(this).removeClass("orange");
	     $(this).toggleClass("orange");
      });
});
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2014, 21:26
Интересующийся
Отправить личное сообщение для sarkis28 Посмотреть профиль Найти все сообщения от sarkis28
 
Регистрация: 05.03.2014
Сообщений: 14

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


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

Последний раз редактировалось sarkis28, 05.07.2014 в 21:28.
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2014, 21:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,594

Сообщение от sarkis28
Еще вопрос :
неосилил ваш вопрос
а ещё проще можно написать?
может вы меню мастерите -- так их 100500 на форуме.
Ответить с цитированием
  #5 (permalink)  
Старый 05.07.2014, 22:09
Интересующийся
Отправить личное сообщение для sarkis28 Посмотреть профиль Найти все сообщения от sarkis28
 
Регистрация: 05.03.2014
Сообщений: 14

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

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

а вообще , я нарисовал .. https://cloclo1.datacloudmail.ru/vie...2803%40mail.ru
Ответить с цитированием
  #6 (permalink)  
Старый 05.07.2014, 22:10
Интересующийся
Отправить личное сообщение для sarkis28 Посмотреть профиль Найти все сообщения от sarkis28
 
Регистрация: 05.03.2014
Сообщений: 14

рони,
если где-то уже было такое - киньте ссылочку , а то не могу построить поисковой запрос
Ответить с цитированием
  #7 (permalink)  
Старый 05.07.2014, 22:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,594

Сообщение от sarkis28
я нарисовал
и где картинка?
может html нормальный где будет понятно что такое ваш тест за кнопкой
Ответить с цитированием
  #8 (permalink)  
Старый 05.07.2014, 22:30
Интересующийся
Отправить личное сообщение для sarkis28 Посмотреть профиль Найти все сообщения от sarkis28
 
Регистрация: 05.03.2014
Сообщений: 14

рони,
попробуйте по этой ссылке увидеть рисунок
https://cloud.mail.ru/public/f127dc5...0%B5%D1%80.png
Ответить с цитированием
  #9 (permalink)  
Старый 05.07.2014, 22:31
Интересующийся
Отправить личное сообщение для sarkis28 Посмотреть профиль Найти все сообщения от sarkis28
 
Регистрация: 05.03.2014
Сообщений: 14

вот конструкция моего меню..
<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>
Ответить с цитированием
  #10 (permalink)  
Старый 05.07.2014, 22:33
Интересующийся
Отправить личное сообщение для sarkis28 Посмотреть профиль Найти все сообщения от sarkis28
 
Регистрация: 05.03.2014
Сообщений: 14

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите оптимизировать код. vas88811 Events/DOM/Window 4 05.03.2014 14:21
помогите пожалуйста улучшить код. Duda.Ml1986@gmail.com Серверные языки и технологии 4 07.01.2012 19:53
Выпадающие списки. Помогите подправить код. cardsmoney Элементы интерфейса 6 18.02.2011 16:20
Код калькулятора на JS. помогите с ошибкой! kirill.psl Общие вопросы Javascript 9 26.08.2010 11:38
Помогите оптимизировать код. pizzZ jQuery 5 17.11.2009 23:52