Question

我在这里有一个动态页面http://www.intelligen.info/index.html，当从左侧的导航栏中选择一个锚点时，它会替换内容。应该将“当前”类添加到并保留在所选锚点上，但它不起作用。选中后，所选锚点应该有一条直线。我怎样才能做到这一点？

这是代码：

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    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("current");
                    $("nav a[href="+newHash+"]").addClass("current");
                });
            });
    };

});

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

});

Answer 1

应引用属性选择器的值，因此请将其更改为：

$("nav a[href='"+newHash+"']").addClass("current");

之后它应该工作。您可以使用:target pseudo selector获得相同的视觉效果，这可能更方便。

Answer 2

newHash的值包含.，因为它是page.html。 .是jQuery选择器中的特殊字符，因此您有两个选项。转义它或将您的属性的值等于引号中的选择器。后者是两者中较容易的。改变这一行：

$("nav a[href="+newHash+"]").addClass("current");

为：

$('nav a[href="'+newHash+'"]').addClass("current");

Answer 3

您想要更改href或将类添加到“selected”（我猜是单击的）元素吗？

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

这必须在hashchange之外，或者在点击时触发hashchange。

单击动态页面时，类不会保留在锚点上

3 个答案: