Форум

skorpeeon · #1 (**permalink**) 01.05.2012, 15:48

Задача такая :
Есть html код

<ul class="sidebar">
		<li class="active"><a href="#" id="profile"><h4><img class="icon" src="images/icons/card.png"/>PROFILE</h4>
															<p>About Me</p></a></li>
		<li><a href="#" id="resume"><h4><img class="icon" src="images/icons/resume.png"/>RESUME</h4>
															<p>My Job and Skills</p></a></li>
		<li><a href="#" id="folio"><h4><img class="icon" src="images/icons/case.png"/>FOLIO</h4>
															<p>My Works</p></a></li>
		<li><a href="#" id="contact"><h4><img class="icon" src="images/icons/mail.png"/>CONTACT</h4>
															<p>Let's Get In Touch!</p></a></li>
						</ul>

Есть JavaScript код

$(document).ready(function(){
    $('.four.columns.sidebar li a').click(function() {
        $(this).siblings('.four.columns.sidebar li a').removeClass('active');
        $(this).addClass('active');
    });
});

который при нажатии на определенную ссылку присваивает элементу li нажатой ссылки класс active.
Но обнаружилась проблема - при нажатии на другую ссылку ей тоже присваивается класс active, а у предыдущей ссылки он почему-то не удаляется. Как сделать чтобы он удалялся?

l-liava-l · #2 (**permalink**) 01.05.2012, 15:58

Цитата:

а у предыдущей ссылки он почему-то не удаляется.

Не удаляется потому что по клику на другую ссылку обработчик принимает ее, а не прошлую. А у вас там this =)
Вот так вот надо:

$(document).ready(function(){
    $('.four.columns.sidebar li a').click(function() {
        $('four.columns.sidebar li a').removeClass('active');//заберет актив у всех ссылок
        $(this).addClass('active');//присвоит нужной
    });
});

skorpeeon · #3 (**permalink**) 01.05.2012, 16:07

l-liava-l,
по-прежнему не удаляется

l-liava-l · #4 (**permalink**) 01.05.2012, 16:18

Да мне тоже надо а то туплю)

skorpeeon · #5 (**permalink**) 01.05.2012, 16:23

dmitriymar,
Мне просто сегодня нужно закончить, не успею доки прочитать

dmitriymar · #6 (**permalink**) 01.05.2012, 16:28

$('four.columns.sidebar.active').removeClass('active');

как то так селектор и код должены выглядеть ,если не прав -джиквери не пользуюсь

skorpeeon · #7 (**permalink**) 01.05.2012, 16:31

Всё-равно не получается(

dmitriymar · #8 (**permalink**) 01.05.2012, 16:59

$(document).ready(function(){
    $('.sidebar li a').click(function() {
    $('.active').removeClass('active');
        $(this).addClass('active');
    });
});

и не удивительно. обратите внимание чему вы класс присваиваете-в нтмл в li класс,а клик происходит по а

skorpeeon · #9 (**permalink**) 01.05.2012, 17:24

dmitriymar,
Спасибо большое! Теперь всё работает!

GeeR · #10 (**permalink**) 25.07.2013, 18:58

А у меня не переключается класс

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Оригинальное разрешение</title>
<link href="1.css" type="text/css" rel="stylesheet">
<script language="JavaScript" type="text/javascript" src="1.js"></script>
</head>
<body>

<ul class="sidebar">
        <li class="active"><a href="#" id="profile"><h4><img class="icon" src="images/icons/card.png"/>PROFILE</h4>
                                                            <p>About Me</p></a></li>
        <li><a href="#" id="resume"><h4><img class="icon" src="images/icons/resume.png"/>RESUME</h4>
                                                            <p>My Job and Skills</p></a></li>
        <li><a href="#" id="folio"><h4><img class="icon" src="images/icons/case.png"/>FOLIO</h4>
                                                            <p>My Works</p></a></li>
        <li><a href="#" id="contact"><h4><img class="icon" src="images/icons/mail.png"/>CONTACT</h4>
                                                            <p>Let's Get In Touch!</p></a></li>
</ul>

<script type="text/javascript">
        $(document).ready(function(){
			$('.sidebar li a').click(function() {
			$('.active').removeClass('active');
				$(this).addClass('active');
			});
		});
    </script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript