Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Присваивание класса при нажатии на ссылку (https://javascript.ru/forum/dom-window/27958-prisvaivanie-klassa-pri-nazhatii-na-ssylku.html)

skorpeeon 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 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 01.05.2012 16:07

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

l-liava-l 01.05.2012 16:18

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

skorpeeon 01.05.2012 16:23

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

dmitriymar 01.05.2012 16:28

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

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

skorpeeon 01.05.2012 16:31

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

dmitriymar 01.05.2012 16:59

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

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

skorpeeon 01.05.2012 17:24

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

GeeR 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>



Часовой пояс GMT +3, время: 05:31.