<p>我在使用 JavaScript 更改文本翻译时遇到问题。</p>
<p>这是html代码</p>
<p>
<pre class="brush:js;toolbar:false;">document.getElementById('slider-en1').style.visibility = 'hidden';
document.getElementById('slider-id1').style.visibility = 'visible';
function changeFunc() {
var selectBox = document.getElementById("language_select");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
// alert(selectedValue);
if (selectedValue == 'id') {
document.getElementById('slider-en1').style.visibility = 'visible';
document.getElementById('slider-id1').style.visibility = 'hidden';
}
if (selectedValue == 'en') {
document.getElementById('slider-en1').style.visibility = 'visible';
document.getElementById('slider-id1').style.visibility = 'hidden';
}
}</pre>
<pre class="brush:html;toolbar:false;"><select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
<ul class="sub-menu">
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-white" disabled default selected value="">Language</option>
</li>
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-dark" id="id" value="id">Indonesia</option>
</li>
<li class="nav-item sub-menu-item">
<option class="nav-link sub-menu-link text-dark" id="en" value="en">English</option>
</li>
</ul>
</select>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1">
<p class="slide-subtitle narrow-centerd-text">
indonesia indonesia indonesia
</p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1">
<p class="slide-subtitle narrow-centerd-text">
en en en
</p>
</div></pre>
</p>
<p>我尝试过使用jquery，但仍然无法正常工作。谢谢您的回答</p>
<p>我尝试使用 JavaScript 显示和隐藏内容，但我的代码无法正常工作</p>
1
866
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
UL LI不是select的有效子元素。
然而，我简化了您的代码以提高效率。
我为每个语言div添加了一个data属性。该属性保存表示内容的语言值。我还创建了一个名为"active"的css类，它将显示适当的语言div，并将语言div默认隐藏。
然后，我使用事件处理程序而不是内联事件（onchange），这是更好的方法，也将帮助您在将来做更多事情。
在我的事件监听器中，我只是获取所选值。然后，我查看是否有任何带有active类的语言div，如果有，则删除它。然后，我找到并将active类添加到适当的语言div。
这个过程将帮助您扩展代码，因为您不需要关心if语句。
let langSelect = document.querySelector("#language_select"); langSelect.addEventListener("change",(e) => { let shown = document.querySelector(".active[data-lang]"); if(shown)shown.classList.remove("active"); document.querySelector(`[data-lang='${langSelect.value}']`).classList.add("active") });[data-lang]{visibility:hidden} .active[data-lang]{visibility:visible;}<select class="nav-item has-sub-menu language-selector" id="language_select"> <option disabled selected value="">Language</option> <option value="id">Indonesia</option> <option value="en">English</option> </select> <div class="col-9 col-md-10 col-lg-8 mx-auto active" data-lang="id" id="slider-id1"> <p class="slide-subtitle narrow-centerd-text"> indonesia indonesia indonesia </p> </div> <div class="col-9 col-md-10 col-lg-8 mx-auto" data-lang="en" id="slider-en1"> <p class="slide-subtitle narrow-centerd-text"> en en en </p> </div>