jQuery链式调用attr设置href后addClass不生效问题求助

What's Likely Happening #

The most probable culprit here is the default link click behavior causing a page refresh before the active class can be applied. When you modify the href in the click event and chain addClass, the browser immediately starts navigating to the new URL. The DOM doesn't get a chance to render the new class before the page reloads—so it looks like addClass isn't working. But when you use addClass alone, the link probably isn't triggering a navigation (maybe the original href was empty or invalid), so you can see the class change.

Also, quick note on your uri string: you've got extra double quotes in there. Your current code would set the href to sysadmin_delivery_ready.html?uid="+testnum (literally including +testnum as part of the URL), which is not what you want. Fix the string concatenation like this:

var uri = 'sysadmin_delivery_ready.html?uid=' + testnum;

Solutions Based on Your Needs #

Scenario 1: You don't need to navigate—just update the href and style

If clicking the link is only meant to update its href and add the active class (no page jump), you need to stop the browser's default click behavior:

$(document).ready(function() {
  $("#mylink").click(function(e) {
    // Prevent the browser from following the link
    e.preventDefault();
    
    var getuid = ${userId};
    var testnum = btoa(getuid);
    var uri = 'sysadmin_delivery_ready.html?uid=' + testnum;
    
    // Chained call will now work as expected
    $(this).attr("href", uri).addClass('active');
  });
});

Using $(this) instead of re-selecting $("#mylink") is more efficient and cleaner.

Scenario 2: You need to navigate, and want the active class on the target page

If you do need to jump to the new page, adding the active class on the current page is useless—it'll get wiped when the page refreshes. Instead, apply the class on the target page using the URL parameter:

1. Current page's click handler (just update the href and let navigation happen):

$(document).ready(function() {
  $("#mylink").click(function() {
    var getuid = ${userId};
    var testnum = btoa(getuid);
    var uri = 'sysadmin_delivery_ready.html?uid=' + testnum;
    
    $(this).attr("href", uri);
    // No need for addClass here—page will reload anyway
  });
});

2. Target page (sysadmin_delivery_ready.html) code:

$(document).ready(function() {
  // Get the uid parameter from the URL
  const urlParams = new URLSearchParams(window.location.search);
  const uid = urlParams.get('uid');
  
  // Add active class to the link if the uid exists
  if (uid) {
    $("#mylink").addClass('active');
  }
});

Quick Debug Check #

If you're still unsure, add a console log to confirm if addClass is actually running:

$("#mylink").attr("href", uri).addClass('active');
console.log($("#mylink").hasClass('active')); // If this logs true, the issue is definitely the page refresh

内容的提问来源于stack exchange，提问作者techmguru