Question

当我单击“欧洲”按钮时，我希望显示ID ='1'的div容器的内容。单击“美国”按钮时，应显示ID为2的DIV的内容。

我的代码存在以下问题：加载页面时，我无法选择不显示DIV或仅显示特定DIV。第一次单击按钮后，该功能不再起作用。

由www.DeepL.com/Translator（免费版）翻译

function showOne(id) {
    $('.hide').not('#' + id).hide();
}

<button type="button" onclick="showOne('1')">Europe</button>
<br>
<button type="button" onclick="showOne('2')">USA</button>
<div class='hide' id='2'>About USA</div>
<div class='hide' id='1'>About Europe</div>

Answer 1

您只需要在单击按钮时首先显示当前div，例如：

function showOne(id) {
    $('#' + id).show();
    $('.hide').not('#' + id).hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="showOne('1')">Europe</button>
<br>
<button type="button" onclick="showOne('2')">USA</button>
<div class='hide' id='2'>About USA</div>
<div class='hide' id='1'>About Europe</div>

Answer 2

您可以尝试添加.show()方法以在隐藏之前显示所有这些元素：

function showOne(id) {
    $('.hide').show().not('#' + id).hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" onclick="showOne('1')">Europe</button>
<br>
<button type="button" onclick="showOne('2')">USA</button>
<div class='hide' id='2'>About USA</div>
<div class='hide' id='1'>About Europe</div>

Answer 3

说实话，这是一个非常简单的问题，我敢肯定，对于这些问题已经有了答案，无论如何，您可以执行以下操作：

编辑

我可能会补充说，此解决方案仅包含Web本机技术，没有包含jQuery，我不确定这是赞成还是反对。无论如何，如果您想了解有关我使用的本机JavaScript的更多信息，也许MDN将是一个很好的起点。

function showOne(id) {
  document.querySelectorAll(".hide").forEach(function (el) {
    el.style = "display: block;";
  });
  
  document.querySelector(".hide[id='" + id + "']").style = "display: none;";
};

.hide {
  display: none;
}

<button type="button" onclick="showOne('1')">Europe</button>
<br>
<button type="button" onclick="showOne('2')">USA</button>
<div class='hide' id='1'>About USA</div>
<div class='hide' id='2'>About Europe</div>

通过单击按钮显示Div，隐藏其他

3 个答案:

编辑