时间戳

首页 > 解决方案 > 每次我用阿拉伯语更改页面时，它都会先切换到英语，然后再切换到阿拉伯语

javascript - 每次我用阿拉伯语更改页面时，它都会先切换到英语，然后再切换到阿拉伯语

问题描述

我正在开发一个多语言网站。我使用谷歌翻译代码在下拉菜单中选择语言。当我尝试将网站翻译成阿拉伯语时，它已成功翻译但我无法用阿拉伯语导航，因为每次更改页面时，它都会先切换到英语，然后再切换到阿拉伯语。而我的要求是，一旦选择了阿拉伯语，导航将保持稳定且始终使用阿拉伯语。谁能帮我解决这个问题。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <title>League of Arab States</title>
  <meta charset="utf-8">
  <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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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>
  <link rel="stylesheet" href="pages/home/styles/home.css">
  <link rel="icon" href="../../../../favicon.ico">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en',
        includedLanguages: 'ar,en',
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        multilanguagePage: true,
        autoDisplay: false
      }, 'google_translate_element');
      $('.goog-te-menu-value').on('DOMSubtreeModified', 'span', function() {
        language = $(".goog-te-menu-value span").html();

        if (language == "Arabic") {
          $(".col-sm-1").css({
            "float": "right",
            "direction": "rtl"
          });
          $(".col-sm-1 img").css({
            "padding-right": "5px"
          });
          $(".col-sm-2").css({
            "text-align": "center",
            "direction": "rtl"
          });
          $(".navbar-nav").css({
            "float": "left",
            "text-align": "left",
            "padding-left": "5px"
          });
          $(".col-sm-4").css({
            "float": "right ",
            "direction": "rtl"
          });
          $(".panel").css({
            "float": "right",
            "direction": "rtl"
          })
          $(".col-sm-8").css({
            "float": "left",
            "direction": "rtl"
          });
          $("footer").css({
            "direction": "rtl"
          })

        }
        if (language == "English") {
          $(".col-sm-1").css({
            "float": "left",
            "direction": "ltr"
          });
          $(".col-sm-1 img").css({
            "padding-right": "5px"
          });
          $(".col-sm-2").css({
            "text-align": "center",
            "direction": "ltr"
          });
          $(".col-lg-4").css({
            "float": "right",
            "min-height": "0px !important",
            "padding-left": "0px !important",
            "direction": "ltr"
          });
          $(".col-sm-4").css({
            "float": "left",
            "direction": "ltr"
          });
          $(".panel").css({
            "float": "left",
            "direction": "ltr"
          })
          $(".col-sm-8").css({
            "float": "right",
            "direction": "ltr"
          });
          $("footer").css({
            "direction": "ltr"
          });
        }

      });
    };
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

我正在编写我的代码片段以进行语言选择。

标签： javascript

解决方案

推荐阅读