AJAX成功后如何添加活动类

Question

我正在尝试使用 AJAX 创建导航菜单，我的想法是在单击菜单后添加 .active 类。这是我的代码

HTML

<ul id="nav">
    <li><a href="default">Home</a></li>
    <li><a href="about">About</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

<div id="content"> Content will be here ... </div>

Javascript

$(function() {
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        // if i place addClass here all parent() will have active class
        $(this).parent().addClass('active');
        $.ajax({
            url : page + '.php',
            // if i place removeClass here, no active class show
            beforeSend: function() {
                $(this).parent().removeClass('active');
            },
            success: function(res) {
                $('#content').html(res);
            }
        });
    });
});

我只需要一个parent() 或<li> 标记具有活动类（让我们在单击链接后说为当前页面。有人可以告诉我，如何实现这一点吗？非常感谢任何建议或cmets。

添加小提琴：http://jsfiddle.net/xpvt214o/176903/

Answer 1

我已使用虚拟 ajax 请求来满足要求。

HTML

<ul id="nav">
  <li><a href="javascript:void(0)">Home</a></li>
  <li><a href="javascript:void(0)">About</a></li>
  <li><a href="javascript:void(0)">Contact</a></li>
</ul>
<div id="content">
</div>

Javascript

$("document").ready(function() {
  $("#nav li a").on("click", function(e) {
    var activeElement = $(this).parent("li");
    // If your would set active element does not want to complete ajax request then uncomment below and comment ajax request same code
    //$("#nav li").removeClass("active");
    //activeElement.addClass("active");
    $.ajax({
      url: '/echo/js/?js=hello%20world!',
      success: function(res) {
        // If you would set active element after success of ajax request
        $("#content").html(res);
        $("#nav li").removeClass("active");
        activeElement.addClass("active");
      }
    });
  });
});

请查看 jsfiddle 工作示例：https://jsfiddle.net/tqbspruv/37/

希望对您有所帮助。

Answer 2

我会在成功回调中添加代码。为 HTML 代码中的所有菜单项分配一个 ID。然后，在成功回调中，从所有菜单项中删除活动类，然后仅将其添加到单击的菜单项中。也许是这样的：

$(function() {
   $('ul#nav li a').click(function() {
    var page = $(this).attr('href');
    var clickedID = $(this).attr("id");        

    $.ajax({
        url : page + '.php',
        success: function(res) {
            $('ul#nav li a').removeClass('active');
            $("#" + clickedID).addClass('active');
            $('#content').html(res);
        }
    });
   });
});