javascript - 使用 jquery 隐藏/显示基于语言的 div

Question

我的网页隐藏和显示不同的问题 <div>上的元素。我想翻译页面并添加两个按钮以在语言之间切换。

$('#hu').click(function() {
  $('#show').css('display', 'none');
  $('#hide').show();
});
$('#en').click(function() {
  $('#hide').css('display', 'none');
  $('#show').show();
});

#hide {
  display: none;
}

#show {
  display: true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English">
<input class="translate" type="button" id="hu" value="Magyar">

<ul>
  <li class="current">
    <div id="show"><a href=index.html>Főoldal</a></div>
  </li>
  <li>
    <div id="show"><a href=oneletrajz.html>Önéletrajz</a></div>
  </li>
  <li>
    <div id="show"><a href=kapcsolat.html>Kapcsolat</a></div>
  </li>
  <li>
    <div id="hide"><a href=index.html>Home</a></div>
  </li>
  <li>
    <div id="hide"><a href=oneletrajz.html>About US</a></div>
  </li>
  <li>
    <div id="hide"><a href=kapcsolat.html>Contact Us</a></div>
  </li>
</ul>

Answer 1

你完全混淆了 #hide , #show等。你需要的是 class 每种语言和一个标志(可选)。

1. 上语言课 en或 es上面有元素。
2. 使用.hide()和 .show()用于隐藏和显示。
3. 加载时，隐藏其中一种语言。
4. 永远不要重复id值。在 HTML 中这是一种犯罪。改用类。
5. 使用 <li> 上的语言类(class)比 child 。

$(function() {
  $('.Magyar').hide();
  $('#hu').click(function() {
    $('.English').hide();
    $('.Magyar').show();
  });
  $('#en').click(function() {
    $('.English').show();
    $('.Magyar').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English" />
<input class="translate" type="button" id="hu" value="Magyar" />

<ul>
  <li class="current Magyar">
    <div><a href=index.html>Főoldal</a></div>
  </li>
  <li class="Magyar">
    <div><a href=oneletrajz.html>Önéletrajz</a></div>
  </li>
  <li class="Magyar">
    <div><a href=kapcsolat.html>Kapcsolat</a></div>
  </li>
  <li class="current English">
    <div><a href=index.html>Home</a></div>
  </li>
  <li class="English">
    <div><a href=oneletrajz.html>About US</a></div>
  </li>
  <li class="English">
    <div><a href=kapcsolat.html>Contact Us</a></div>
  </li>
</ul>