我使用了jQueryScript.NET中的一个脚本进行翻译，我在预构建的主题上使用它，所以我认为主题的css阻止了我的代码首先应用，在控制台中，当页面加载时我看不到内联样式，但当我切换语言时，它切换得很完美HTML：
<head>
<style>
li[lang="en"] {display: none}
li[lang="ar"] {display: none}
</style>
</head>
<body>
<div class="navigation-navbar collapsed">
<ul class="navigation-bar navigation-bar-left">
<li lang="en"><a href="#hero">Home</a></li>
<li lang="ar"><a href="#hero">الصفحة الرئيسية</a></li>
</ul>
</div>
<script src="jquery-simple-multi-lang.js"></script>
<script>
$("document").ready(function() {
$("input[type=radio]").change(function() {
$("li[lang]").languageSwitcher( $(this).attr("id") );
});
});
</script>
</body>
jQuery-simple-multi-lang.js：
(function($){
$.fn.languageSwitcher = function(lang){
$.each(this, (index, value) => {
if (lang == $(value).attr("lang")) {
$(value).css("display", "inline");
} else {
$(value).css("display", "none");
}
});
return this;
}
}(jQuery));
在控制台中,当页面加载时,显示两种语言：
<div class="navigation-navbar collapsed">
<ul class="navigation-bar navigation-bar-left">
<li lang="en" class="active"><a href="#hero">Home</a></li>
<li lang="ar" class="active"><a href="#hero">الصفحة الرئيسية</a></li>
</ul>
</div>
在控制台中，当我使用切换器时，它完美地应用了样式，并显示了所选的语言：
<div class="navigation-navbar collapsed">
<ul class="navigation-bar navigation-bar-left">
<li lang="en" class="active" style="display: inline;"><a href="#hero">Home</a></li>
<li lang="ar" class="active" style="display: none;"><a href="#hero">الصفحة الرئيسية</a></li>
</ul>
</div>
这是因为没有点击任何输入收音机，所以任何li将不可见。
若要在不修改javascript的情况下显示enonload，请更改CSS并将checked添加到选定的收音机
null
$("document").ready(function() {
$("input[type=radio]").change(function() {
$("li[lang]").languageSwitcher($(this).attr("id"));
})
});
(function($) {
$.fn.languageSwitcher = function(lang) {
$.each(this, (index, value) => {
if (lang == $(value).attr("lang")) {
$(value).css("display", "inline");
} else {
$(value).css("display", "none");
}
});
return this;
}
}(jQuery));/*
Set all li element to hidden
but not li that has [lang="en"]
*/
li[lang]:not(li[lang="en"]) {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation-navbar collapsed">
<ul class="navigation-bar navigation-bar-left">
<li lang="en"><a href="#hero">Home</a></li>
<li lang="ar"><a href="#hero">الصفحة الرئيسية</a></li>
<li lang="jp"><a href="#hero">ホームホームة</a></li>
</ul>
<!-- add checked to the "en" -->
en: <input type="radio" name="lang" id="en" checked>
ar: <input type="radio" name="lang" id="ar">
jp: <input type="radio" name="lang" id="jp">
</div>