记住最近的点击

Question

So I want to be able to have a different styling for a link after you go to the page it's clicked on. I have been using the following code:

$(document).ready(function(){
var url = document.URL;
function contains(search, find) {
    return search.indexOf(find) !== -1;
};
$('#topbar a').each(function(){
    var link = $(this).attr('href');
    var answer = contains(link,url);
    if(answer === true){
        $(this).addClass('check');
    }
    else{
        $(this).addClass('nocheck');
    };
});
});

This goes through the links in my navigation bar and checks if it's on the same page as the link, and it works, but I can't use it in one specific case: Random.

I have a link that generates a random page from the pages I have, so it does not have a specified link as it links to a function to randomly generate the page (note: I cannot change the function or access information from it).

So how can I detect that the random link was clicked previously so i can give it the .check class

Answer 1

If i understand your question correctly, your function does not work for the random link because this has a href like http://mysite.com/random , but the server will actualy redirect you to a different page, like http://mysite.com/about-me , and therefore the url of the active page does not match the href of the random button, and it will not get the active state.

One could argue if you would want it to get the active state, cause clicking it again would not (likely) bring you to the same page, but that is besides the question.

I can see to ways to solve this.

server side:
In stead of redirecting to ie. http://mysite.com/about-me in the random function, you could also redirect to http://mysite.com/about-me?random . By adding this get variable, you should not change the behaviour of the link (unless you have some very strict controller, or that variable is actually used, but that is unlikely). You could then detect with javascript if that variable is present in the url, and then activate the random button.

Something like this:

$(document).ready(function(){
  var url = document.URL;
  // check for random
  if (url.indexOf('?random') >= 0) {
     $('#topbar a.random').addClass('check');
  }
  // check all other
  $('#topbar a:not(.random)').each(function(){
      if($(this).attr('href').indexOf(url) >= 0){
         $(this).addClass('check');
      }
      else{
         $(this).addClass('nocheck');
      };
  });
});

cookie:
If you do not have acces to the server side random controller, you could do it entirely with javascript, by the use of a cookie (the only way I know to make a variable persist trough page requests).

On click of the random button, you would first set a random cookie to true with javascript, before letting the actual link do it's thing. On entering the page, you could then do a similar check as in my previous option, but in stead of the url you check if the cookie is tre. If so, you change it to false (so on the next page request the random button will not be active again) and set the random button to active.

As I believe the first solution is to be preferred (cookies should only be used as a last resort, they are sent on every page request, which means extra data, and your user might have cookies disabled, or there might be laws against using cookies, so the function could not always work), I will not write the javascript yet. Feel free to ask if you prefer this solution and need further help however.