coolio83000 coolio83000 - 2 months ago 6
CSS Question

continue with same Show and hide divs when we change page

I work with a function in my main page. All works fine, I just want to know if when i click on a link and go in another page, I can use the same function in others pages, and my goal is to have the same language activate when i'm in another page.

For example id="en" is the language by default, but if I want to use id="de" in my main page, and click on link who will send me in another page. I will come back to id="en" or I can continu with id="de" in my new page ?

Here is the jsfiddle of the function that I use:

https://jsfiddle.net/kodjoe/chvw181j/


HERE IS MY HTML CODE

<a class="button" id="en">EN</a>
<a class="button" id="fr">FR</a>
<a class="button" id="de">DE</a>


<div class="lan en">1</div>
<div class="lan fr">2</div>
<div class="lan de">3</div>
<div class="lan en">4</div>
<div class="lan fr">5</div>
<div class="lan de">6</div>


HERE IS MY JS

$(document).ready(function() {
$('.lan').hide();
$('.en').show();
});

$('.button').click(function(event) {
$('.lan').hide();
var selectedLanguage = $(this).attr('id');
var setActiveLanguage = "." + selectedLanguage;
$(setActiveLanguage).show();

localStorage.setItem("language", selectedLanguage);
currentlanguage= localStorage.getItem("language");
});


HERE IS MY CSS

.button { cursor:pointer; padding: 0px 30px; }

Answer
localStorage.setItem("language", selectedLanguage);

currentlanguage= localStorage.getItem("language");