HTML два варианта языка с кнопкой (без необходимости перенаправить на другую страницу) - PullRequest
Новая
       11

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

0 голосов
/ 27 октября 2018

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

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>

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

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

<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 для примера)

0 голосов
/ 27 октября 2018

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>
...