Изменение стилей по клику
Есть список у меня по клику стиль меняется, но я хочу при этом удалить класс у предыдущего элемента. Как реализовать?
function kodimg(id) { document.getElementById(id).className = 'act'; } вот html <ul> <li id="1" class="act" onclick="kodimg(id)"><a href="#">объявления</a></li> <li id="2" onclick="kodimg(id)"><a href="#">товары</a></li> <li id="3" onclick="kodimg(id)"><a href="#">все</a></li> </ul> |
Можно так, например:
function kodimg(){
$('li').click(function () {
$('li').removeClass('act');
$(this).addClass('act');
});
}
|
работает, но только после второго клика почему то
|
да и еще можно как нибудь для конкретного списка так сделать? а то щас получается, что ко всем спискам добавляет атрибут - class
|
Попробуй так:
onclick="kodimg(); return false;" А по поводу списка, присвой ему класс и напиши так:
$('ul.yourClass li').click(function () {
$('ul.yourClass li').removeClass('act');
$(this).addClass('act');
});
А вообще почитай про селекторы jQuery, там много полезных штук найдёшь. |
А вообще зачем тебе onclick?
Убираешь у элементов списка onclick и просто задаёшь класс списку и пишешь так:
$(document).ready(function(){
$('ul.yourClass li').click(function () {
$('ul.yourClass li').removeClass('act');
$(this).addClass('act');
});
});
|
блин, все равно по второму клику в начале надо
|
У меня всё работает. Покажи код html + js.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script> function kodimg(){ $('ul.lol li').click(function () { $('ul.lol li').removeClass('act'); $(this).addClass('act'); }); } </script> </head> <body> <ul class="lol"> <li id="1" class="act" onclick="kodimg(); return false;"><a href="#">объявления</a></li> <li id="2" onclick="kodimg(); return false;"><a href="#">товары</a></li> <li id="3" onclick="kodimg(); return false;"><a href="#">все</a></li> </ul> </body> </html> |
Ну я же выше написал, что нужно убрать онклик, а скрипт такой:
$(document).ready(function(){
$('ul.yourClass li').click(function () {
$('ul.yourClass li').removeClass('act');
$(this).addClass('act');
});
});
П.С.: А ещё код тут можно подсвечивать специальными тэгами. |
| Часовой пояс GMT +3, время: 20:39. |