javascript - 我需要这些按钮来控制显示哪个 div 或 "on top"

Question

我的页面侧面有这些按钮，主要内容区域占据了页面的大部分。

我想做的是让我点击的按钮将主要内容更改为包含相应信息的 div。这很难找到，也许是因为我用错误的术语搜索，而且我已经涵盖了 stackoverflow 的很大一部分，但运气不佳。

虽然我已经考虑过绝对定位 div 并使用脚本将 div 的 z-index 更改为使用“=+1”类型情况的最高数量，但我可以看到它变得困惑。

我考虑过改编我拥有的脚本来替换图像文件名的一部分，以便将页面上的主图片更改为与缩略图名称对应的图像的较大版本，尽管该脚本针对文件名，因此它进展不顺利。

我也尝试过类似的方法:

"id of button"onclick function = "main content class"改变id为"对应的div"

仅在 javascript 讨论中，这根本不起作用，所以我只能假设我看错了，或者我在代码中搞砸了。

$('#tabhead1').click(function() {
  document.getElementByClassName("maintab").id = "tabs1";
});

这让我发疯，我真的很感激一些想法。我试图让它自由形成，这样就没有人会挂断任何解决方案。

**** 澄清一下，我在#tabhead1、#tabhead2、#tabhead3 等处有 5 个 id，还有 5 个分类为 .maintab 的内容 div，id 为 tabs1、tabs2、tabs3、等等 我需要第一个内容 div 自动显示，并根据单击的按钮更改该 div。目前所有内容 div 都设置为显示:无；除了第一个。

Answer 1

• 为每个按钮添加一个 data与相应的 <div> 相关的属性

例如

<button id="tabhead1" data-content="tabs1" >first Tab</button>

• 为选项卡应用通用类，例如.tab

然后你可以进行以下操作

$('button').click(function(){
 var contentId = $(this).data('content'); // get the id of corresponding tab
 $('.tab').hide(); // hide all tabs
 $('#'+contentId).show(); //show the corresponding tab
});