onclick - How to show another group of column when you onclick or hover

Question

I need something like this rchange.net I am looking for something that he did on the comparison table in which when you hover on a category a menu will appear. How is this possible?

Answer 1

如果您检查您链接的文档的 DOM，您可以看到左侧有一个<p>元素列表。您可以将它们替换为<ul>... 给它们一个 id ，例如id="element-1".

在右侧，有一个<div>元素列表，每个元素都包含一个表格。所有 div 都放在同一个地方（父容器必须是position:relative和所有 div position:absolute;top:0;left:0;），但只显示一个。给他们一个共同的类名和一个与列表元素的 ID 对应的唯一类名。喜欢<div class="divCommonClass element-1" ... />

每次悬停或点击列表中的某个元素时，只需获取该元素的 idvar match = $(this).prop("id");并查找对应的 div 即可。您可以做的一件事是，隐藏所有div，选择ID对应的类名的div，显示它。

   //on click...
   var match = $(this).prop("id");
   $(".divCommonClass").hide();
   $("."+match).show();