Форум Сайтостроение Веб-строительство

js добавить класс

123 4
AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
2354

Доброе время суток. Прошу помощи в написание простого скрипта.

Есть конструкция:


<nav>
    <ul>
        <li class="item1"><a href="#">item1</a></li>
        <li class="item2"><a href="#">item2</a></li>
        <li class="item3"><a href="#">item3</a></li>
        <li class="item4"><a href="#">item4</a></li>
    </ul>
</nav>

Нужно при переходе по ссылке, чтобы добавляло класс:

class="item1 active"
C
На сайте с 04.02.2005
Offline
277
Chukcha
#1

$('.item1 a').click(function(){

$(this).parent().addClass('active');

})

Алексей Барыкин
На сайте с 04.02.2008
Offline
272
Алексей Барыкин
#2

Вбейте в гугль "javascript добавить класс".

//ваш кэп

https://adminbook.ru/
AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
#3
Chukcha:
$('.item1 a').click(function(){
$(this).parent().addClass('active');
})

Мне нужно чтобы не конкретно к item1, а ко всем item1, item2, item3, item4

P.S. Ваш скрипт не работает.

---------- Добавлено 09.12.2012 в 02:40 ----------

Алексей Барыкин:
Вбейте в гугль "javascript добавить класс".
//ваш кэп

Я прежде чем тут создать тему, гуглю хорошо, когда уже нет вариантов подключаю форум.

Вставлял разные варианты, не хочет работать, может я что-то не так делаю?

H
На сайте с 09.10.2012
Offline
11
hedint
#4

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

если первый вариант (один пункт в один момент времени), то примерно так(jQuery):

$('nav a').click(function(){
var parent = $(this).parent();
var global_parent = $(this).closest('ul'); //или $(this).parent().parent();
$('li',global_parent).removeClass('active'); // или $('li.active').removeClass('active');
$(parent).addClass('active');
return false;
});

не проверял, возможны опечатки.

Если произвольное количество, то убираем removeClass

vandamme
На сайте с 30.11.2008
Offline
672
vandamme
#5
AGRESSOR:
не конкретно к item1, а ко всем item1, item2, item3, item4

$('li a').click(function(){

$(this).parent().addClass('active');

})

[Удален]
#6
AGRESSOR:
Нужно при переходе по ссылке, чтобы добавляло класс:

а подумать?

зачем вообще используете тег <a> для навигации внутри страницы?

:)

Алексей Барыкин
На сайте с 04.02.2008
Offline
272
Алексей Барыкин
#7
AGRESSOR:
Мне нужно чтобы не конкретно к item1, а ко всем item1, item2, item3, item4
P.S. Ваш скрипт не работает.

---------- Добавлено 09.12.2012 в 02:40 ----------



Я прежде чем тут создать тему, гуглю хорошо, когда уже нет вариантов подключаю форум.
Вставлял разные варианты, не хочет работать, может я что-то не так делаю?

Плохо видать гуглили. А что вы не так делаете сказать очень сложно - вы же ни одного варианта не показали.

[Удален]
#8

AGRESSOR, объясните, решения каких задач вы желаете реализовать?

подсветка ссылки по которой уже был переход внутри страницы? (при условии что их более 1 на странице)

или что-то ещё

AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
#9 


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    $('li a').click(function() {
    $(this).parent().addClass('active');
});
</script>
</head>
<body>
<nav>
    <ul>
        <li class="item1"><a href="#">item1</a></li>
        <li class="item2"><a href="#">item2</a></li>
        <li class="item3"><a href="#">item3</a></li>
        <li class="item4"><a href="#">item4</a></li>
    </ul>
</nav>
</body>
</html>

Не хочет работать

vandamme
На сайте с 30.11.2008
Offline
672
vandamme
#10
burunduk:
зачем вообще используете тег <a> для навигации внутри страницы?

не обязательно чтобы перейти по ней, а например для слайдера

123 4

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий