jquery 获取 id 并附加 .html & toggleClass

Question

我是 jquery 的新手，很乐意在这方面得到一些提示。我有几个链接，我想将它们的内容加载到我的#content div。我不使用href，所以我想加载id并附加.html（例如：第一个链接得到id="link1"。点击时我想将link1.html加载到#content div。）。此外，我想将点击链接的类别从非活动切换为活动，并找到上一个活动链接并将其更改为非活动。

这就是我尝试过的：

$(".link").click(function() {
    var linkHref = $(this).attr("id");
    var loadHref = linkHref.append(linkHref + ".html");
    $("#content").load(loadHref);
    $("#nav").find(".active").toggleClass("active inactive");
    $(this).children("a").toggleClass("inactive active");
});

HTML：

<ul id="nav">
    <li><a href="#" id="link1" class="active link">Link 1</a></li>
    <li><a href="#" id="link2" class="inactive link">Link 2</a></li>
    <li><a href="#" id="link3" class="inactive link">Link 3</a></li>
</ul>

输出：什么都没有发生。

Answer 1

append 是 jQuery 对象的一个​​方法，attr 返回一个没有append 方法的字符串（一个字符串对象），如果你想连接字符串你应该使用+ 操作符。另请注意，您已将处理程序绑定到 a 元素而不是 li 元素，因此无需使用 children。

var linkHref = $(this).attr("id") + '.html';

$(".link").click(function(e) {
    // Prevent the default action of the event
    e.preventDefault();
    var linkHref = this.id + '.html';
    $("#content").load(linkHref);
    $("#nav a.active").toggleClass('inactive active');
    $(this).addClass("active").removeClass('inactive');
});