Смена класов(отдельно) для пунктов меню
Вот есть такая структура меню:
<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, время: 14:25. |