JSFiddle - React, Tailwind, and code Playground

by hoss

HTML

<!--<select id="lang">
    <option>RO</option>
    <option>RU</option>
</select>-->
<div id="lang">
  <a href="#" class="selected">RO</a>
  <a href="#">RU</a>
</div>

<span data-translate="_hello">Salut</span>, 
<span data-translate="_january">Ianuarie</span>!

CSS

#lang .selected { font-weight: bold; color: red; }

JavaScript

$(function () {

    // Lets be professional, shall we?
    "use strict";

    // Some variables for later
    var dictionary, set_lang;

    // Object literal behaving as multi-dictionary
    dictionary = {
        "ro": {
            "_hello": "Salut",
            "_january": "Ianuarie"
        },
        "ru": {
            "_hello": "Привет",
            "_january": "Январь"
        }
    };

    // Function for swapping dictionaries
    set_lang = function (dictionary) {
        $("[data-translate]").text(function () {
            var key = $(this).data("translate");
            if (dictionary.hasOwnProperty(key)) {
                return dictionary[key];
            }
        });
    };

    // Swap languages when menu changes
//    $("#lang").on("change", function () {
//        var language = $(this).val().toLowerCase();
//        if (dictionary.hasOwnProperty(language)) {
//            set_lang(dictionary[language]);
//        }
//    });

		$("#lang a").on("click", function () {
        var language = $(this).text().toLowerCase();
        $("#lang a").removeClass("selected");
        $(this).addClass("selected");
        if (dictionary.hasOwnProperty(language)) {
            set_lang(dictionary[language]);
        }
    });

    // Set initial language to English
    set_lang(dictionary.ro);

});