Навигация по текущим ссылкам в CSS и jQuery: как обновить класс <li> - PullRequest
Новая
       2

Навигация по текущим ссылкам в CSS и jQuery: как обновить класс <li>

3 голосов
/ 03 октября 2010

У меня есть этот код jQuery, который извлекает внешнее содержимое с использованием ajax без обновления страницы, а также у меня есть навигационные ссылки, которые имеют другой цвет фона, когда пользователь находится на текущей странице.

Код jQuery: 

function loadPage(url)  //the function that loads pages via AJAX
{
    url=url.replace('#page','');    //strip the #page part of the hash and leave only the page number

    //$('#loading').css('visibility','visible');    //show the rotating gif animation
        $('.counter').html('<img src="img/ajax_load.gif" width="16" height="16" style="padding:12px" alt="loading" />');

    $.ajax({    //create an ajax request to load_page.php
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,  //with the page number as a parameter
        dataType: "",   //expect html to be returned
        success: function(msg){

            if(parseInt(msg)!=0)    //if no errors
            {
                $('#change-container').html(msg);   //load the returned html into pageContet


            }
        }

    });
}

html-код навигации: 

<ul>
   <li class="current"><a href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
   <li><a href="#page4">Favorites</a></li>
</ul>

Поэтому, когда кто-то нажимает на ссылку для ответов, я хочу, чтобы класс li изменился на текущий, чтобы указать, что вына этой странице.

Ответы [ 2 ]

2 голосов
/ 03 октября 2010

Пример: http://jsfiddle.net/4cs9h/

$('ul > li > a').click(function() {
    var $th = $(this).parent();
    if( !$th.hasClass('current') ) {
        $th.addClass('current')
               .siblings('.current').removeClass('current');
        loadPage(this.href);
    }
    return false;
});

Переменная $th относится к родительскому элементу <li> <a>, по которому щелкнули.

Если <li> действительно не имеет класс current, класс будет добавлен и будет удален из всех братьев и сестер, имеющих этот класс, и будет вызван loadPage(), отправив href атрибут нажатых <a>.

Что касается вашего комментария, да, было бы неплохо нацелить конкретный <ul> с помощью идентификатора. 

$('#navigation > li > a').click(function() {...

HTML 

<ul id="navigation">
   <li class="current"><a href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
   ...

Чтобы использовать хеш-значение, включенное в страницу, вы можете передать его в функцию loadPage(). 

var hash = window.location.hash;

    if( !hash || hash === '#' )
        hash = "#page1";

loadPage( hash );
1 голос
/ 03 октября 2010

Это будет работать для того, что вы хотите, с ограничениями: 

$('ul a').click(
    function(){
        $('.current').removeClass('current');
        $(this).addClass('current');

        return false;
    }
);

Проблемы:

  1. Нет id для родителя ul, поэтому this (предположительно навигация) ul ничем не отличается от других на странице,
  2. Это означает, что если щелкнуть любую ссылку (a) внутри любого ul, эта ссылка получит имя класса current. Это может быть то, что вы хотите, но я бы не советовал, слишком легко закончить с нежелательным поведением.

Предложение:

Дайте родителю ul id (таким образом, он идентифицируется уникально на странице), например, «навигация», это позволяет jQuery стать очень избирательным. 

$('#navigation a').click(
  function() {
    $('.current','#navigation').removeClass('current');
    $(this).addClass('current');
    return false;
  }
);

Это также частично решает проблемы, поднятые @Alec в комментариях, поскольку id предоставляет уникальный контекст для поиска элемента .current, предотвращая рассеивание эффектов по всей странице.

...