javascript - 显示/隐藏 Div 组合 jQuery

Question

更新: Working answer .

这是一个关于 jQuery/JS 的相当复杂的问题 - 我找到了一篇解决类似问题的帖子 here ，但我没有使用原始 html 或标签，因此代码的结构有很大不同。

基本上，我有一个需要在页面加载时隐藏的 div 列表，然后我需要在单击触发元素时显示每个 div。问题是我需要在单击不同的触发元素时隐藏所有其他 div。显然 display: none; 需要在页面加载时出现，但 jQuery 超出了我目前的知识范围。

示例:

当点击这个div时

<div id="div1trigger">View Div 1 Contents</div>

显示此 div:

<div id="div1">Div 1 Content Here</div>

我使用这个 JS 来完成这个工作:

<script>
jQuery("#div1trigger").click(function(){
    jQuery("#div1").toggle();
});
</script>

我知道 .toggle() 的使用非常简单，但这就是变得复杂的地方，我总共有 5 个触发 div 和 5 个内容 div，每个都需要显示其相应的 div并同时隐藏所有其他 div。

我在想如下内容:

<script>
jQuery("#div1trigger").click(function(){
    jQuery("#div1").toggle();
        jQuery("#div2, #div3, #div4, #div5").hide();

});
</script>

然后 ^ 5 次来控制每个触发 div(尽管我几乎可以肯定这个问题有一个更干净/更“正确”的解决方案)。

请注意所有触发器 div 均由“divnumbertrigger”标记，例如#div2trigger；所有内容 div 都标有“divnumber”，例如 #div2。

最后，为了视觉引用，这里是前端的屏幕截图，以帮助可视化使用情况，所有内容 div 使用页面的相同区域(绿色框)和所有“查看”按钮(红框内)是 div 触发器:

任何人都可以为我提供可行的解决方案/实现此目标的正确方法吗？

Answer 1

这里使用类基础，所以你可以这样做:

<div id="div1" class="contentDivs">Div 1 Content Here</div>
<script>jQuery("#div1trigger").click(function() {jQuery("contentDivs").hide();
jQuery("#div1").show();});</script>

因此，我们隐藏所有 div，然后仅显示需要的 div。

谢谢