jQuery, как изменить идентификатор между классами

62
8

jsfiddle

Я пытаюсь создать свои "текущие" навигационные вкладки. У меня также есть скрипт hover в jQuery, который вызывает трудности при выполнении этого:

<ul class="nav">
<li class="nav1" id="current"><a href="#">Images</a></li>
<li><span>.</span></li>
<li class="nav2"><a href="#">Articles</a></li>
<li><span>.</span></li>
<li class="nav3"><a href="#">Links</a></li>
<li><span>.</span></li>
<li class="nav4"><a href="#">Contact</a></li>
</ul>

//This bit does not work as expected. -->
$(".nav li a").click(function(){

$("li#current").removeAttr('id');
$(this).parent().attr("id","current");

});

В основном мне нужно переместить id из первого li anchor в зависимости от того, какой другой li-якорь щелкнут, и этот вновь установленный идентификатор распознается скриптом hover.

Например, когда вы нажимаете "Статьи", "Изображения" исчезают синим цветом, а "Статьи" отображаются синим цветом и остаются видимыми после перемещения мыши.

Кто-нибудь знает, как это сделать?

спросил(а) 2012-10-21T19:21:00+04:00 7 лет, 4 месяца назад
1
Решение
50

Лучше всего добавить дополнительный current класса для выбранного элемента - class="nav1 current"

$(".nav li a").click(function(){
$(this).parent().parent().find('li').removeClass('current');
$(this).parent().addClass('current');
});

Должно быть так... нужно проверить это.

EDIT: Да, это работает.

ответил(а) 2012-10-21T19:31:00+04:00 7 лет, 4 месяца назад
35

Обновлена ваша скрипка: http://jsfiddle.net/mvNCz/17/ В принципе вы отменили логику - вам нужно поменять классы, а не id.

$(".nav li a").hover(function(){
var other = $("#" + $(this).parent().attr('id') + "x");
other.addClass("hovered");
$(this).mouseout(function(){
other.removeClass("hovered");
});
});
$(".nav li a").click(function(){
$("li.current").removeClass('current');
$("#" + $(this).parent().attr('id') + "x").addClass("current");
});

ответил(а) 2012-10-21T19:35:00+04:00 7 лет, 4 месяца назад
35

Вы не меняете местами имена или имена в html, только классы и другие переходные атрибуты. В противном случае вы будете вызывать побочные эффекты, когда код ожидает, что идентификатор будет находиться на определенном элементе. Подумайте об этом, изменив свой номер социального страхования, потому что у вас была синяя рубашка на выходные.

Добавьте текущий класс к вашему CSS и включите и выключите его элементы в зависимости от выбранного.

ответил(а) 2012-10-21T19:24:00+04:00 7 лет, 4 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема