如何顯示另一組列時，當你點擊或懸停

Question

我需要像這樣的東西rchange.net 我正在尋找他在比較表上做的事情，當你將鼠標懸停在某個類別上時，會出現一個菜單。這怎麼可能？

Answer 1

如果您檢查鏈接文檔的DOM，您可以看到左側有一個<p>元素的列表。您可以用<ul>替換它們...給它們一個像id="element-1"的ID。

在右邊部分有一個<div>元素的列表，每個元素包含一個表格。所有div都放在同一位置（父容器必須爲position:relative，所有div爲position:absolute;top:0;left:0;），但只顯示一個。爲它們提供與列表元素的ID相對應的所有常用類名稱和唯一類名稱。像<div class="divCommonClass element-1" ... />

每次您將鼠標懸停或單擊列表中的某個元素時，只需獲取此元素的ID var match = $(this).prop("id");並查找相應的div。你可以做的一件事是，隱藏所有div，選擇與該ID對應的類名的div，顯示它。

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