I'm doing my own portfolio website (2 language TH/EN).
The buttons for changing languages. I can do it.
But I think if I change the page, the language button must have problems because new page loads.
My question is
What should I do? When I changed the page The language I chose from the beginning is still active.
Example : The default language is Thai. But I click changed to English.The information in the home page changes to English.
If I click on another menu like About Us, the information on that page is displayed in English.
$("html").each(function () {
if ($(".lang-select.th").hasClass('active')) {
$('.lang-select').parents('html').attr('lang', 'th');
$('.content-th').show();
$('.content-en').hide();
} else if ($(".lang-select.en").hasClass('active')) {
$('.lang-select').parents('html').attr('lang', 'en');
$('.content-th').hide();
$('.content-en').show();
}
});
$(".lang-select.th").click(function () {
$(this).addClass("active");
$(".lang-select.en.active").removeClass("active");
$('.lang-select').parents('html').attr('lang', 'th');
$('.content-th').show();
$('.content-en').hide();
});
$(".lang-select.en").click(function () {
$(this).addClass("active");
$(".lang-select.th.active").removeClass("active");
$('.lang-select').parents('html').attr('lang', 'en');
$('.content-th').hide();
$('.content-en').show();
});.lang-select {
width:30px;
height:30px;
background:#eaeaea;
cursor:pointer;
}
.lang-select.active {
background:yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box-language">
<span class="lang-select th active">TH</span>
<span class="lang-select en">EN</span>
</div>
<h1 class="content-th">ภาษาไทย Thailand</h1>
<h1 class="content-en">ภาษาอังกฤษ English</h1>
</body>
</html>
