Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.05.2012, 15:48
Новичок на форуме
Отправить личное сообщение для skorpeeon Посмотреть профиль Найти все сообщения от skorpeeon
 
Регистрация: 01.05.2012
Сообщений: 9

Присваивание класса при нажатии на ссылку
Задача такая :
Есть 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, а у предыдущей ссылки он почему-то не удаляется. Как сделать чтобы он удалялся?
Ответить с цитированием
  #2 (permalink)  
Старый 01.05.2012, 15:58
Профессор
Отправить личное сообщение для l-liava-l Посмотреть профиль Найти все сообщения от l-liava-l
 
Регистрация: 14.03.2012
Сообщений: 1,808

Цитата:
а у предыдущей ссылки он почему-то не удаляется.
Не удаляется потому что по клику на другую ссылку обработчик принимает ее, а не прошлую. А у вас там this =)
Вот так вот надо:
$(document).ready(function(){
    $('.four.columns.sidebar li a').click(function() {
        $('four.columns.sidebar li a').removeClass('active');//заберет актив у всех ссылок
        $(this).addClass('active');//присвоит нужной
    });
});
Ответить с цитированием
  #3 (permalink)  
Старый 01.05.2012, 16:07
Новичок на форуме
Отправить личное сообщение для skorpeeon Посмотреть профиль Найти все сообщения от skorpeeon
 
Регистрация: 01.05.2012
Сообщений: 9

l-liava-l,
по-прежнему не удаляется
Ответить с цитированием
  #4 (permalink)  
Старый 01.05.2012, 16:18
Профессор
Отправить личное сообщение для l-liava-l Посмотреть профиль Найти все сообщения от l-liava-l
 
Регистрация: 14.03.2012
Сообщений: 1,808

Да мне тоже надо а то туплю)
Ответить с цитированием
  #5 (permalink)  
Старый 01.05.2012, 16:23
Новичок на форуме
Отправить личное сообщение для skorpeeon Посмотреть профиль Найти все сообщения от skorpeeon
 
Регистрация: 01.05.2012
Сообщений: 9

dmitriymar,
Мне просто сегодня нужно закончить, не успею доки прочитать
Ответить с цитированием
  #6 (permalink)  
Старый 01.05.2012, 16:28
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

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

как то так селектор и код должены выглядеть ,если не прав -джиквери не пользуюсь
Ответить с цитированием
  #7 (permalink)  
Старый 01.05.2012, 16:31
Новичок на форуме
Отправить личное сообщение для skorpeeon Посмотреть профиль Найти все сообщения от skorpeeon
 
Регистрация: 01.05.2012
Сообщений: 9

Всё-равно не получается(
Ответить с цитированием
  #8 (permalink)  
Старый 01.05.2012, 16:59
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

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

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

Последний раз редактировалось dmitriymar, 01.05.2012 в 17:02.
Ответить с цитированием
  #9 (permalink)  
Старый 01.05.2012, 17:24
Новичок на форуме
Отправить личное сообщение для skorpeeon Посмотреть профиль Найти все сообщения от skorpeeon
 
Регистрация: 01.05.2012
Сообщений: 9

dmitriymar,
Спасибо большое! Теперь всё работает!
Ответить с цитированием
  #10 (permalink)  
Старый 25.07.2013, 18:58
Новичок на форуме
Отправить личное сообщение для GeeR Посмотреть профиль Найти все сообщения от GeeR
 
Регистрация: 25.07.2013
Сообщений: 2

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

Код:
<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Звук при нажатии на ссылку Dave Элементы интерфейса 45 15.02.2016 23:32
Заполнение поля при нажатии на ссылку ganzales Общие вопросы Javascript 6 14.10.2012 14:18
Вставка текста в форму при нажатии на ссылку Sergei1988 Общие вопросы Javascript 2 03.04.2011 22:05
Если один уже открыт и при нажатии на ссылку два первый блок скрывался и открывался ybiza Элементы интерфейса 3 16.12.2010 22:24
Подгрузка контента в определённый DIV при нажатии на ссылку, без перезагрузки страниц Flashton Events/DOM/Window 0 10.03.2010 19:53