bleiben Klasse nach der Aktualisierung

Question

Ich fand diese Geige aus anderen Fragen, und es ist gut zu bedienen. Das Problem ist die hinzugefügte Klasse (.active) in der Schaltfläche remove beim Aktualisieren. Wie kann ich es bleiben lassen? Ich lade es neu.

FIDDLE

HTML

<div class="flr-wrap"> 
<ul> 
    <li><a class="button active" data-rel="#content-a" href="#">a button</a></li> 
    <li><a class="button" data-rel="#content-b" href="#">b button</a></li> 
</ul> 

<div class="flr-inner"> 
    <div class="container" id="content-a"> 
     AAA 
    </div> 
    <div class="container" id="content-b"> 
     BBB 
    </div> 
</div> 

JS

// set content on click 
$('.button').click(function(e) { 
    e.preventDefault(); 
    setContent($(this)); 
}); 

// set content on load 
$('.button.active').length && setContent($('.button.active')); 

function setContent($el) { 
    $('.button').removeClass('active'); 
    $('.container').hide(); 

    $el.addClass('active'); 
    $($el.data('rel')).show(); 
} 

Vielen Dank im Voraus ..

Answer 1

Sie müssen den aktiven Zustand entweder in dem Server gespeichert werden (wenn es eine Möglichkeit, dies zu tun) oder in der Client-Seite

speichern es in Client-Seite

(können Sie Web-Speicher verwenden)

// set content on click 
$('.button').click(function(e) { 
    e.preventDefault(); 
    setContent($(this)); 
    localStorage.setItem('active-container', $(this).data('rel')); 
}); 

// set content on load 
localStorage.getItem('active-container') && setContent($('.button[data-rel="' + localStorage.getItem('active-container') + '"]')); 

function setContent($el) { 
    $('.button').removeClass('active'); 
    $('.container').hide(); 

    $el.addClass('active'); 
    $($el.data('rel')).show(); 
}