как изменить цвет активной ссылки без обновления страницы?

0

Я пытаюсь разработать веб-сайт. На моем сайте есть две ссылки для навигации. Когда пользователь нажимает на ссылку навигации, страница будет загружаться без обновления. Я сделал эту часть. Но проблема в том, что цвет активной ссылки не меняется. Это мой сайт https://dl.dropboxusercontent.com/u/168659703/project3/index.html, и я использовал следующий код для загрузки страницы

 $(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wra"),
    baseHeight   = 0,
    $el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$(".nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);


    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });

                    $(".nav a").removeClass("active");
                    $(".nav a[href="+newHash+"]").addClass("active");
                });
            });
    };

});

$(window).trigger('hashchange');

});

Скажите, пожалуйста, как я могу решить эту проблему?

  • 0
    Вы можете установить класс так, чтобы он имел желаемый цвет, и добавить класс к привязке, по которой вы щелкнули, или изменить цвет ссылки с помощью jquery.
  • 0
    Разве href не начинается с хеша # , но вы вырезали это из newHash ? Так что вам нужно добавить его обратно в ваш селектор, где вы добавляете класс.
Теги:

2 ответа

0

Изменить цвет напрямую

$(".nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    $(this).css('color', '#000'); // black for example
    return false;
});

или добавлением класса

$(".nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    $(this).addClass('visited');
    return false;
});

CSS

.visited {
    color: #000;
}
0

Если я правильно прочитал, вам нужно сбросить якорь:

$("#anchor1").hide();
$("#anchor1").attr('href', some_val);
$("#anchor1").show();

Или

var href = $('#anchor1').attr("href")
$('#anchor1').removeAttr('href').prop('href', href);

Или т.п.

Точка - заставить браузер перекрасить элемент.

Прочитай это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню