Форум

Dalave1998 · #1 (**permalink**) 18.07.2014, 20:40

Вот есть такая структура меню:

<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

Сообщение от Dalave1998

Как сделать, чтобы добавление класса происходило индивидуально

что значит индивидуально?

Dalave1998 · #3 (**permalink**) 19.07.2014, 10:19

Сообщение от рони

что значит индивидуально?

Данный скрипт работает так: при клике на любой из пунктов меню, он удаляет у них заданный клас и присваевает этот же класс к нажатому пункту. Вот как мне нужно: при клике на любой из пунктов, он удаляет у них класс и присваивает для каждого пункта свой. (к первому пункту присвоет, если он нажат, - activeClass, к другому - passiveClass и т.д.)

рони · #4 (**permalink**) 19.07.2014, 10:51

Dalave1998,
вроде всё просто, но остался в непонятках что вы хотите?
может вам просто записать в css -- нужный класс activeClass для каждой ссылки и нетрогать скрипт.

Dalave1998 · #5 (**permalink**) 19.07.2014, 13:55

в скрипте то для кажой ссылки идет один и тот же класс. А если задавать разные классы, то прийдется дублировать скрипт с нужным классом

рони · #6 (**permalink**) 19.07.2014, 14:01

Dalave1998,
неа скрипт дублировать или изменять нет смысла ... нужно только добавить css --- класс будет добавляться один и тотже -- но для каждой ссылки это будет иное

Dalave1998 · #7 (**permalink**) 19.07.2014, 14:26

ну вот я так сделал, и оно работает. НО там будет больше чем 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

Dalave1998,
css!!!!

Dalave1998 · #9 (**permalink**) 19.07.2014, 14:32

Сообщение от рони

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

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>

Форум

Справочник

Discord чат

Курсы javascript