Смена класов(отдельно) для пунктов меню
Вот есть такая структура меню:
<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")? |
Цитата:
|
Цитата:
|
Dalave1998,
вроде всё просто, но остался в непонятках что вы хотите? может вам просто записать в css -- нужный класс activeClass для каждой ссылки и нетрогать скрипт. |
в скрипте то для кажой ссылки идет один и тот же класс. А если задавать разные классы, то прийдется дублировать скрипт с нужным классом
|
Dalave1998,
неа скрипт дублировать или изменять нет смысла ... нужно только добавить css --- класс будет добавляться один и тотже -- но для каждой ссылки это будет иное |
ну вот я так сделал, и оно работает. НО там будет больше чем 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> т.е. в каждом я индивидуально прописал и удалил все возможные классы, кроме класса для кликнутого пункта |
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;
}
|
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>
|
| Часовой пояс GMT +3, время: 02:48. |