如何在页面加载jQuery时只显示一种语言
我使用了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>
共有1个答案
这是因为没有点击任何输入收音机，所以任何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>-
问题内容： 我尝试在我的网站中实施AJAX。单击div changepass的内容时，则应加载changepass.template.php。这是我为此使用的代码。 我的问题是在页面changepass.template.php完全加载时如何显示GIF动画（loading.gif）。请给我一些代码提示。 问题答案： 有很多方法可以做到这一点。一种简单的方法： JS： 詹姆斯·怀斯曼 （ James
-
问题内容： 我的网站上有一个版块，在进行一些密集的通话时加载速度很慢。 知道如何div在页面准备时显示类似于“加载”的内容，然后在一切准备就绪时消失吗？ 问题答案： 我需要这个，经过一番研究，我想到了这个（需要jQuery）： 首先，在标签之后添加以下代码： 然后将div和图片的样式类添加到CSS： 然后，将此JavaScript添加到您的页面中（当然，最好在页面结尾处，在结束
-
我的jsp中有一个这样的tr。 我也有这样的选择。 select中使用的javascript函数如下所示。 因此，如果所选行不是0，我将不会在页面中显示tr。这很好用 我在请求中设置了dateRange变量。setAttribute（）并从操作发送它 问题是从请求值中正确地选择了选项，但是没有显示tr 我尝试在jsp中的表单外部这样运行它，希望它能在页面加载之前执行，但没有发生。 有什么想法吗？
-
一些背景：我正在使用Jquery Mobile（1.4稳定版）和Phonegap（3.3版）构建一个应用程序。我目前正在Android 2.3（设备）和Android 4.1.2（模拟器）上测试。我在索引中有一个链接。html有一个指向另一个页面的链接（比如说，test.html也是一个JQM页面）。<代码>测试。html也位于应用程序的www文件夹中。但它是一个相当大的html文件，大小为159
-
问题内容： 在某个AngularJS视频中，我看到了如何避免在Javascript解析表达式之前将其可见。但是我不记得它是怎么做到的… 我有一个，我想说“正在加载…” AngularJS有机会来分析它。如何才能做到这一点？ 问题答案： 就像其他人提到的那样，使用ng-cloak，但是如果它是第一个加载到您的页面中的内容，还可以将以下内容添加到您的CSS中。 这将确保您的div模板是隐藏的。在该di
-
问题内容： 我有一个基本页面，顶部有一个导航栏，还有一个包装器主体。 每当用户单击导航链接时，它都会用于将页面内容加载到包装div中。 来自的返回值示例： 如您所见，我在上显示了一个Bootstrap进度条，在我调用的页面上，加载每个项目后，我都会修改进度条的值。 这在Firefox上效果很好，在等待页面加载时可以看到进度条，但在Chrome或IE上不起作用。 有一个更好的方法吗？我是正确执行此操