Навигация addClass / removeClass по клику - PullRequest
Новая
       5

Навигация addClass / removeClass по клику

1 голос
/ 22 октября 2011

У меня есть меню, которое ссылается на контент на той же странице, и через jQuery постепенно выгружает и выводит div, работает отлично.

К первой ссылке в навигации прикреплен класс (current_page_item), и яхотел бы, щелкнув по любой другой ссылке в навигации, удалить этот класс и добавить его к нажатой ссылке.

До сих пор я пробовал что-то вроде: 

$(function() {
    $("#nav-links a").click(function(){
        $("#nav-links ul li").removeClass("current_page_item").find("li:last a").addClass("current_page_item");
        });
    });

, которыйне работает.

Я очень плохо знаком с javascript, поэтому любая помощь будет принята.

Спасибо!

РЕДАКТИРОВАТЬ:

ВотHTML-код для навигации: 

            <div id="nav-wrap">

                <ul class="group" id="nav-links">
                    <li class="current_page_item"><a href="#recent" class="linkclass recent">RECENT</a></li>
                    <li><a href="#work" class="linkclass work">WORK</a></li>
                    <li><a href="#who" class="linkclass who">WHO</a></li>
                    <li><a href="#services" class="linkclass services">SERVICES</a></li>
                    <li><a href="#contact" class="linkclass contact">CONTACT</a></li>
                </ul>

            </div>

РЕДАКТИРОВАТЬ 2:

Использование ответов ниже все еще не похоже на то, что я хочу.Возможно, это из-за плагина jQuery, который я использую (волшебная линия). Ссылка

Таким образом, я бы хотел, чтобы «линия» оставалась под тем, что нажимается.Это работает, если я загружаю новую страницу с 'current_page_item' в нужном месте, но, поскольку я делаю вход и выход DIV, я не могу этого сделать.

Строка возвращается к элементу liс классом 'current_page_item'.Возможно, этот код можно изменить, чтобы добавить класс к элементу, по которому щелкнули?

Вот код. 

    $(function() {

        var $el, leftPos, newWidth,
            $mainNav = $("#nav-links");

        $mainNav.append("<li id='magic-line'></li>");
        var $magicLine = $("#magic-line");

        $magicLine
            .width($(".current_page_item").width())
            .css("left", $(".current_page_item a").position().left)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());

        $("#nav-links li a").hover(function() {
            $el = $(this);
            leftPos = $el.position().left;
            newWidth = $el.parent().width();
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }, function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        });
    });

Ответы [ 4 ]

2 голосов
/ 22 октября 2011

Вы можете получить доступ к нажатому элементу с помощью $(this) и получить доступ к его родительскому элементу li с помощью parent(), чтобы добавить current_page_item класс.Ниже приведен окончательный код, и вы можете найти рабочий пример здесь . 

$(function() {
    var $el, leftPos, newWidth,
        $mainNav = $("#nav-links");

    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#nav-links li:not('#magic-line') a").hover(function() {
        $el = $(this).parent();
        leftPos = $el.position().left;
        newWidth = $el.width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    },function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    }).click(function() {
         $mainNav.find('li').removeClass('current_page_item');
         $(this).parent().addClass('current_page_item');
         $magicLine
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());
    });
});
0 голосов
/ 22 октября 2011
  1. nav-links является ul, поэтому $("#nav-links ul li") означает все li с внутри ul ведьма является потомком nav-links и, очевидно, нет ни одного Вы должны использовать $("#nav-links li").
  2. Как и все остальные, кто упоминал .find ищет всех потомков, и это не то, что вы ищете. Используйте .closest("ul") непосредственно перед .find

Надеюсь, это поможет.

0 голосов
/ 22 октября 2011 
$(function() {
    $("#nav-links a").click(function(){
 var B = $(this);
$("#nav-links ul li").removeClass("current_page_item");
B.addClass("current_page_item");
        });
    });

попробуйте

0 голосов
/ 22 октября 2011 
$(function() {
    $("#nav-links a").click(function(){
        $("#nav-links li").removeClass("current_page_item").closest("ul").find("li:last a").addClass("current_page_item");
        });
    });

.find () находит только элементы-потомки. вы делаете .find на li, который является родственным элементом искомого элемента.

...