javascript - How to localize a simple HTML website page in my case?

Question

I am NOT developing any web service application which contain client side and backend server side (like java EE application or Ruby on Rails).

Instead, I am simply developing a HTML website page, on this page, there are two flag images(USA and China) which is used as a language selection of the page for users.

I am wondering, for this single web page development (without any backend system), is there any efficient way to implement the page localization(that's display the page in different language) based on the flag selection from user?

Answer 1

You can use the standard HTML lang attribute:

<span lang="en">Scale</span><span lang="de">Ma?stab</span>

And then you can hide and show the matching elements:

function select_language(language) {
    $("[lang]").each(function () {
        if ($(this).attr("lang") == language)
            $(this).show();
        else
            $(this).hide();
    });
}

I use a simple selection:

<select onchange="select_language(this.options[this.selectedIndex].value)">
  <option value="en" selected>English</option>
  <option value="de">Deutsch</option>
</select>