How to keep selected/active HTML link color on page refresh?

Question

EDIT:

I want to keep selected keep HTML link color on page refresh. I tried other problems that already been answered but didn\'t work

Answer 1

Here's the JS which should be triggered on DOM ready:

$('#col-navigation a').click(function(e){
   e.preventDefault();
   $(".content").hide().filter( $(this).data("target") ).show();
   localStorage.setItem('target', $(this).data("target"));
});
var target = localStorage.getItem('target');
!target || $('.content').hide().filter(target).show();

And here's the HTML; added data- attribute and .content class:

        

            
 
                 Quizzes 
            
            
 
                 Categories 
            
            
 
                 Jump 
            
        


 
     Quizzes! 



     Categories!


 

     Jump!

Demo Using localStorage to remember last selected option

UPDATE

As for manipulation of the .focus class, some additional JS will suffice. No need to save any additional info in localStorage.

$('#col-navigation a').click(function(e){
   e.preventDefault();
   $(this).addClass('focus').parent().siblings().find('a').removeClass('focus'); //<<<--THIS
   $(".content").hide().filter( $(this).data("target") ).show();
   localStorage.setItem('target', $(this).data("target"));
});
var target = localStorage.getItem('target');
!target || $('.content').hide().filter(target).show();
!target || $('a[data-target="' + target + '"]').addClass('focus').parent().siblings().find('a').removeClass('focus'); //<<<-- AND THIS

Updated Demo