Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Смена класов(отдельно) для пунктов меню (https://javascript.ru/forum/jquery/48846-smena-klasov-otdelno-dlya-punktov-menyu.html)

Dalave1998 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")?

рони 18.07.2014 20:59
Цитата:
Сообщение от Dalave1998
Как сделать, чтобы добавление класса происходило индивидуально
что значит индивидуально?

Dalave1998 19.07.2014 10:19
Цитата:
Сообщение от рони (Сообщение 321732)
что значит индивидуально?
Данный скрипт работает так: при клике на любой из пунктов меню, он удаляет у них заданный клас и присваевает этот же класс к нажатому пункту. Вот как мне нужно: при клике на любой из пунктов, он удаляет у них класс и присваивает для каждого пункта свой. (к первому пункту присвоет, если он нажат, - activeClass, к другому - passiveClass и т.д.)

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

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

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

Dalave1998 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>


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

рони 19.07.2014 14:29
Dalave1998,
css!!!!

Dalave1998 19.07.2014 14:32
Цитата:
Сообщение от рони (Сообщение 321800)
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;
}

рони 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>

Dalave1998 19.07.2014 14:38
ухты) я и не знал что так можно в css) спасибо:)

Dalave1998 19.07.2014 21:23
а вот еще вопрос, Рони. Если я хочу чтобы при клике на пункт меню у меня не только к кликнутому елементу добавлялся класс, а к другому. Вот код: 

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

рони 19.07.2014 21:44
Dalave1998,
другой то это какой?

Dalave1998 19.07.2014 22:15
к диву в котором контент

Vlasenko Fedor 19.07.2014 22:21 
<script>
  var active;
  var color = {
    '#one': '#66FF66',
    '#two': '#FFCC00',
    '#three': '#FFFF00'
  };
  window.onload = function () {
    var tabs = document.querySelector('div.tabs');
    var custom = document.getElementById('custom');
    tabs.onclick = function (e) {
      var el = e ? e.target : window.event.srcElement;
      if (el.tagName != "A") return;
      active && (active.style.backgroundColor = '');
      el.style.backgroundColor = color[el.hash];
      custom.style.backgroundColor = color[el.hash];
      active = el;
    }
  }
</script>
<body>
  <div class="menu">
    <div class="tabs">
      <a href="#one">Дом</a>
      <a href="#two">Дом</a>
      <a href="#three">Дом</a>
    </div>
    <div id="custom">Другой блок</div>
  </div>
</body>

рони 19.07.2014 22:32
Цитата:
Сообщение от Dalave1998
к диву в котором контент
и в чём проблема?
$('div').addClass("activeClass");

Dalave1998 19.07.2014 22:33
слишком громоздкий. Нужно из этого.
$(".menu>.tabs>a").click(function(){
          $(".menu>.tabs>a").removeClass("activeClass" )
          $(this).addClass("activeClass");
          });


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