Опция Html на двух языках с кнопкой (без перенаправления на другую страницу)

Я пытаюсь сделать вариант второго языка на веб-сайте. Вот подробности проекта:

1) Я не пытаюсь использовать систему переводчика Google или любую другую службу автоматического перевода, чтобы изменить язык всего веб-сайта.

2) Я только пытаюсь перевести основную часть описания на сайте.

3) Я уже написал и сохранил переведенную версию текста описания.

4) Я также сделал выпадающую кнопку выбора языка в отдельном файле, но в одном шаблоне для обоих языков.

Итак, чтобы было понятно, мой вопрос:

Как я могу использовать кнопку выбора языка для переключения языка между английским и корейским (с английского на корейский и с корейского на английский в зависимости от выбора пользователя) с переведенным текстом описания, который у меня есть?

----- код ниже - это кнопка выбора языка в раскрывающемся списке ----------------

    <!DOCTYPE html>
    <html>
    <head>
	    <title></title>

	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>

    <div class="container">            
       <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Language Option
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">English</a></li>
          <li><a href="#">Korean</a></li>
        </ul>
      </div>
    </div>

    </body>
    </html>


javascript web html css language-switching
person dubooduboo    schedule 27.10.2018    source источник
comment
Вы можете использовать i18, если вы планируете использовать любую структуру javascript, если вы хотите сделать в простом HTML, вы можете обслуживать два разных статических файла с измененным содержимым.   -  person Vikram Thakur    schedule 27.10.2018

Ответы (2)


arrow_upward
1
arrow_downward

Вот как я это делаю, когда создаю многоязычный веб-сайт. Я помещаю примечания внутри кода для пояснений.

<form>
    <label for="lang-switch">
        <span lang="ko">언어</span>
        <span lang="en">Language</span>
    </label>
    <select id="lang-switch">
        <option value="en">English</option>
        <option value="ko" selected>한국어</option>
    </select>
</form>

<p>
    <span lang="ko">한국어 텍스트</span>
    <span lang="en">Text in English</span>
</p>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$('[lang]').hide(); // hide all lang attributes on start.
$('[lang="ko"]').show(); // show just Korean text (you can change it)
$('#lang-switch').change(function () { // put onchange event when user select option from select
    var lang = $(this).val(); // decide which language to display using switch case. The rest is obvious (i think)
    switch (lang) {
        case 'en':
            $('[lang]').hide();
            $('[lang="en"]').show();
        break;
        case 'ko':
            $('[lang]').hide();
            $('[lang="ko"]').show();
        break;
        default:
            $('[lang]').hide();
            $('[lang="ko"]').show();
        }
});
</script>

Надеюсь, это решит вашу проблему.

(поскольку я не говорю по-корейски, я использовал google-translate для примера)

person A. Meshu    schedule 27.10.2018

arrow_upward
0
arrow_downward

Javascript — ваш лучший выбор. В ваших тегах <li> вы хотите добавить прослушиватель событий onclick, чтобы вы могли изменять текст элемента HTML при выборе элемента списка.

<li onclick="toggleLanguage('English')"><a href="#">English</a></li>
<li onclick="toggleLanguage('English')"><a href="#">Korean</a></li>

Здесь атрибут onclick вызывает функцию: function toggleLanguage(language).

Затем создайте тег <script> после тела, чтобы вызвать код JavaScript.

<script>
    function toggleDescriptor(language) {
        let description = document.getElementById("description");
        if (language === "Korean") {
            description.innerHTML = "Show Korean Text";
        }
        else {
            description.innerHTML = "Show English Text";
        }  
    }
<script>

Эта функция обращается к элементу, на который вы хотите изменить текст. В этом случае я создал тег h1 с тегом id="description".

Вот пример всех изменений:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
  <h1 id="description">Show English Text</h1>
   <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Language Option
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li onclick="toggleLanguage('English')"><a href="#">English</a></li>
      <li onclick="toggleLanguage('Korean')"><a href="#">Korean</a></li>
    </ul>
  </div>
</div>

</body>
<script>
  function toggleLanguage(language) {
    let description = document.getElementById("description");
    if (language === "Korean") {
      description.innerHTML = "Show Korean Text";
    }
    else {
      description.innerHTML = "Show English Text";
    }
  }
</script>
</html>

person Kevin Bai    schedule 27.10.2018
comment
Благодарю вас! Я попробовал это решение, и оно сработало! Но у меня есть еще один вопрос, который я хочу задать вам: что, если мне нужно перевести несколько абзацев в моем файле index.html, нужно ли мне использовать if и else несколько раз? Итак, я перевожу раздел часто задаваемых вопросов, и в нем всего 4 вопроса. И я хочу, чтобы кнопка выбора языка работала для всего раздела часто задаваемых вопросов. Прямо сейчас я только что попытался задать один из вопросов и ответить с помощью решения, которое вы предоставили, но я не был уверен, могу ли я как-то обойтись без еще 5-6 операторов if и else. Надеюсь, мой вопрос вам понятен, спасибо :) - person dubooduboo; 28.10.2018
comment
Без проблем. Если вы хотите перевести более одного элемента, вы просто получите элемент DOM, используя document.getElementById("<id here>"), а затем в операторе if вы просто установите для каждого элемента DOM тексты на соответствующем языке. Не будет больше операторов if/else, поскольку if/else используется для различения корейского и английского языков. Вместо этого у вас будет больше строк под каждым оператором if. - person Kevin Bai; 28.10.2018
comment
Если нужно перевести много текста, вы можете поместить соответствующие тексты в другой файл (JSON) и использовать XMLHttp (AJAX) для динамической загрузки текста. - person Kevin Bai; 28.10.2018