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

【问题标题】：Class not remaining on anchor when clicked on dynamic page单击动态页面时，类不保留在锚点上
【发布时间】：2014-02-22 21:34:50
【问题描述】：

我在这里有一个动态页面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');

});

【问题讨论】：

标签： jquery class dynamic anchor

【解决方案1】：

属性选择器的值应该被引用，所以把它改成这样：

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

它应该在那之后工作。使用:target pseudo selector也可以达到同样的视觉效果，可能更方便。

【讨论】：

【解决方案2】：

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

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

到：

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

【讨论】：

【解决方案3】：

您想更改 href 或向“选定”（我猜是点击）元素添加一个类？

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

这必须在您的hashchange 之外，否则您会在点击时触发hashchange。

【讨论】：