Javascript.RU

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

Смена класов(отдельно) для пунктов меню
Вот есть такая структура меню:

<div class="menu">
		  <div class="tabs">
			  <a href="#one">Дом</a>
			  <a href="#two">Дом</a>
			  <a href="#three">Дом</a>
		  </div>
  </div>


и есть такой вот скриптик для отображения активной вкладки меню:

$(".menu>.tabs>a").click(function(){
			  $(".menu>.tabs>a").removeClass("activeClass" )
			  $(this).addClass("activeClass");
			});


Вопрос в следующем. Как сделать, чтобы добавление класса происходило индивидуально, а не как сейчас(что к любому активному пункту добавляется класс "activeClass")?
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2014, 20:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Dalave1998
Как сделать, чтобы добавление класса происходило индивидуально
что значит индивидуально?
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2014, 10:19
Интересующийся
Отправить личное сообщение для Dalave1998 Посмотреть профиль Найти все сообщения от Dalave1998
 
Регистрация: 12.05.2014
Сообщений: 25

Сообщение от рони Посмотреть сообщение
что значит индивидуально?
Данный скрипт работает так: при клике на любой из пунктов меню, он удаляет у них заданный клас и присваевает этот же класс к нажатому пункту. Вот как мне нужно: при клике на любой из пунктов, он удаляет у них класс и присваивает для каждого пункта свой. (к первому пункту присвоет, если он нажат, - activeClass, к другому - passiveClass и т.д.)
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2014, 10:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dalave1998,
вроде всё просто, но остался в непонятках что вы хотите?
может вам просто записать в css -- нужный класс activeClass для каждой ссылки и нетрогать скрипт.
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2014, 13:55
Интересующийся
Отправить личное сообщение для Dalave1998 Посмотреть профиль Найти все сообщения от Dalave1998
 
Регистрация: 12.05.2014
Сообщений: 25

в скрипте то для кажой ссылки идет один и тот же класс. А если задавать разные классы, то прийдется дублировать скрипт с нужным классом
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2014, 14:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dalave1998,
неа скрипт дублировать или изменять нет смысла ... нужно только добавить css --- класс будет добавляться один и тотже -- но для каждой ссылки это будет иное
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2014, 14:26
Интересующийся
Отправить личное сообщение для Dalave1998 Посмотреть профиль Найти все сообщения от Dalave1998
 
Регистрация: 12.05.2014
Сообщений: 25

ну вот я так сделал, и оно работает. НО там будет больше чем 3 пункта и хочется менее громоздко. Вот рабочий скрипт, может вы знаете как его оптимизировать.

<script>
		  $(".menu>.tabs>a.as").click(function(){
		  $(".menu>.tabs>a").removeClass("veClass")
		  $(".menu>.tabs>a").removeClass("Class")
		  $(this).addClass("activeClass");
		  });
	  </script>
	  <script>
		  $(".menu>.tabs>a.sd").click(function(){
		  $(".menu>.tabs>a").removeClass( "activeClass")
		   $(".menu>.tabs>a").removeClass("Class")
		  $(this).addClass("veClass");
		  });
	  </script>
	   <script>
		  $(".menu>.tabs>a.df").click(function(){
		  $(".menu>.tabs>a").removeClass("veClass")
		  $(".menu>.tabs>a").removeClass( "activeClass")
		  $(this).addClass("Class");
		  });
	  </script>



а вот меню:

<div class="tabs">
				  <a class="as" href="#one">Дом</a>
				  <a class="sd" href="#two">Дом</a>
				  <a class="df" href="#three">Дом</a>
			  </div>


т.е. в каждом я индивидуально прописал и удалил все возможные классы, кроме класса для кликнутого пункта
Ответить с цитированием
  #8 (permalink)  
Старый 19.07.2014, 14:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dalave1998,
css!!!!
Ответить с цитированием
  #9 (permalink)  
Старый 19.07.2014, 14:32
Интересующийся
Отправить личное сообщение для Dalave1998 Посмотреть профиль Найти все сообщения от Dalave1998
 
Регистрация: 12.05.2014
Сообщений: 25

Сообщение от рони Посмотреть сообщение
Dalave1998,
css!!!!
немного не понимаю) класс то один и тот же применяется
.activeClass { 
	background:#344455; 
	color:#3498db; 
		-webkit-box-shadow: 30px 0px 0px 0px  #3498db;
		-moz-box-shadow:    30px 0px 0px 0px  #3498db;
		box-shadow:         30px 0px 0px 0px  #3498db;
		-webkit-transition-duration: 0.5s;
		-moz-transition-duration: 0.5s;
		-o-transition-duration: 0.5s;
		transition-duration: 0.5s;
}
Ответить с цитированием
  #10 (permalink)  
Старый 19.07.2014, 14:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dalave1998,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  [href="#one"].activeClass  {
    background: #66FF66;
  }
  [href="#two"].activeClass {
    background: #FFCC00;
  }
  [href="#three"].activeClass{
    background: #FFFF00;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       $(".menu>.tabs>a").click(function(){
			  $(".menu>.tabs>a").removeClass("activeClass" )
			  $(this).addClass("activeClass");
			});
});
  </script>
</head>

<body>
<div class="menu">
		  <div class="tabs">
			  <a href="#one">Дом</a>
			  <a href="#two">Дом</a>
			  <a href="#three">Дом</a>
		  </div>
  </div>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
Изменение порядка пунктов в меню vyrtime jQuery 18 17.06.2011 13:57
Есть меню. Нужно выделить несколько пунктов меню. aleks7890 Общие вопросы Javascript 3 13.05.2011 13:58
Проблема с меню для кнопки в Гриде progi2007 ExtJS 0 03.08.2009 14:16
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49