jquery - изменение класса
Здраствуйте!
Помогите пожалуйста разобратся с jquery.... У меня есть список меню.... при активной ссылке елемент меню выделяется определенным цветом.... Мне нужно чтобы при нажатии на ссылку, У нее свойство class было active... когда нажимаешь на другую ссылку тот class стал active, а предыдущий что бы вообщеничего не прописывало.... Зарание спасибо.... |
// вешаем на каждую ссылку обработчик
$(".menuitem").click(function(){
// удаляем у старого элемента, класс activeClass
$(".activeClass").removeClass("activeClass");
// добавляем к ссылки по которой щёлкнули класс activeClass
$(this).addClass("activeClass");
});
Все ссылки которых косается этот плагин должны иметь класс menuItem. Альтернативное решение, вешающие обработчик на все ссылки, внутри элемента с классом меню. // вешаем на каждую ссылку внутри .menu обработчик
$(".menu").find("a").click(function(){
// удаляем у старого элемента, класс activeClass
$(".menu .activeClass").removeClass("activeClass");
// добавляем к ссылки по которой щёлкнули класс activeClass
$(this).addClass("activeClass");
});
|
я новичок, и плохо разбираюсь.... можете сказать куда этот код прописывать... как его повешать на ссылку....
|
вот код меню
<ul class="artmenu">
<li><a " href="index.html" ><span><span>Новости</span></span></a></li>
<li><a href="index.html" ><span><span>Статьи</span></span></a>
</li>
<li><a href="rep.html"><span><span>Исходники</span></span></a></li>
</li>
<li><a href="leng.html"><span><span>FAQ</span></span></a></li>
<li><a href="text.html"><span><span>Гостевая книга</span></span></a></li>
<li><a href="text.html"><span><span>Обратная связь</span></span></a></li>
</ul>
|
У вас по щелчку будет происходит переход на другую страницу, вы эфекта от скрипта не увидите.
Скрипт то на старой странице, а вы уходите на новую, стиль изменился и тут же изменилась страница, в итоге измененный стиль некто не успеет даже рассмотреть. Изменённый скриптом класс сам собой на новую страницу неперекачует )) Раз у вас меняется меню вместе со страницей, может вам проще дописать класс к элементу на каждой странице, и не надо ни какого программирования.. обьясните пожалуйста что же вы хотите. Может страницы указанные в меню грузятся по ajax. |
Рабочий для ajax.
<html>
<HEAD>
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script>
<STYLE type="text/css">
<!--
.activeClass{
color:blue;
font-size: 20pt;
}
-->
</STYLE>
</HEAD>
<body>
<ul class="artmenu">
<li><a " href="#" ><span><span>Новости</span></span></a></li>
<li><a href="#" ><span><span>Статьи</span></span></a>
</li>
<li><a href="#"><span><span>Исходники</span></span></a></li>
</li>
<li><a href="#"><span><span>FAQ</span></span></a></li>
<li><a href="#"><span><span>Гостевая книга</span></span></a></li>
<li><a href="#"><span><span>Обратная связь</span></span></a></li>
</ul>
<script type="text/javascript">
// вешаем на каждую ссылку внутри .menu обработчик
$(".artmenu").find("a").click(function(){
// удаляем у старого элемента, класс activeClass
$(".artmenu .activeClass").removeClass("activeClass");
// добавляем к ссылки по которой щёлкнули класс activeClass
$(this).addClass("activeClass");
});
</script>
</body>
</html>
Ссылки на страницы я заменил на #, чтобы не происходил переход, иначе бы демо не работало. |
очень вам благодарен что помогаете мне.... У меня все работает если отключаю style.css, но когда с ним работать не хочет....
вот код css для ссылок .artmenu a.active span span
{
color: #2D4453;
background-position: left -58px;
}
подскажите как прописать в javascript'е это... и еще, страница с меню у меня грузится полностю сново... Вот к примеру мы находимся на странице "новости", кликаем на страницу "статьи", страница перегружается заново... нужно, чтобы при клике на новую ссылку ее атрибут class стал active, а все остальные ссылки имели атрибут class пустым |
Добавить класс изображениям
А как добавить класс изображениям. Есть сайт в котором автор в визуальном редакторе добавляет картинки, все что на данный момент есть уже прописаны классы в коде, те что добавляются в визуальном редакторе естесственно этого класса не имеют. Как сделать чтоб всем добавленным в редакторе изображениям добавить класс, например class="first"?
|
Нефига непонятный вопрос :)
Всем изображениям в редакторе добавлен класс first. $('img').addClass("first");
Гораздо более прикольный вопрос это в какой именно момент времени ты планируешь добавлять классы в картинках ? Сразу как картинка добавлена в визуальном редакторе или допустим по нажатию какойто волшебной кнопки ? |
Сразу как только добавиться
|
| Часовой пояс GMT +3, время: 22:18. |