Как сохранить выбранный/активный цвет HTML-ссылки на странице обновления?

Question

EDIT:

Я хочу держать выбранный цвет Keep HTML ссылка на страницу обновления. Я попробовал другие проблемы, на которые уже был дан ответ, но не работал на меня.

Например:

Когда я нажал Html ссылку Категории ссылку HTML Викторины это изменит цвет на красный, и сохранить цвет при обновлении страницы.

HTML

<div id="col-navigation"> 
     <ul> 
      <li> 
       <a href="#"> Quizzes </a> 
      </li> 
      <li> 
       <a href="#"> Categories </a> 
      </li> 
      <li> 
       <a href="#"> Jump </a> 
      </li> 
     </ul> 
</div> 

<div id="quizzes"> 
    Quizzes! <!-- default showed --> 
</div> 

<div id="categories" style="display:none"> 
    Categories! <!-- I have table here, plain text is just a example --> 
</div> 

<div id="jump" style="display:none"> 
    Jump! <!-- I have table here, plain text is just a example --> 
</div> 

JS/JQuery:

//SHOW AND HIDE 
    $('#col-navigation a').click(function(){ 
    $('#quizzes,#categories,#jump').show().not('#' + $.trim($(this).text()).toLowerCase()).hide(); 
}); 

//STAY THE COLOR OF ACTIVE LINK 
$('li').click(function() { 
    $(this).siblings().find('a').removeClass('focus'); 
    $(this).find('a').addClass('focus'); 
}); 

CSS

li a { 
    padding: 20px; 
    display: block; 
} 

li a:hover { 
    background-color: white; 
} 

.focus { 
    background-color: lightblue; 
    color: red; 
} 

li a { 
    color: inherit; 
} 

Answer 1

Вот JS, который должен быть Trigg на основе готовности DOM:

$('#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(); 

И вот HTML; добавлен атрибут data- и .content класс:

<div id="col-navigation"> 
     <ul> 
      <li> 
       <a href="#" data-target="#quizzes"> Quizzes </a> 
      </li> 
      <li> 
       <a href="#" data-target="#categories"> Categories </a> 
      </li> 
      <li> 
       <a href="#" data-target="#jump"> Jump </a> 
      </li> 
     </ul> 
</div> 

<div id="quizzes" class="content"> 
    Quizzes! <!-- default showed --> 
</div> 

<div id="categories" style="display:none" class="content"> 
    Categories! 
</div> 

<div id="jump" style="display:none" class="content"> 
    Jump! 
</div> 

Demo Using localStorage to remember last selected option

UPDATE

Что касается манипулирования .focus класса, некоторые дополнительные JS будет достаточно. Не нужно сохранять дополнительную информацию в 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