Question

我想为多个div做一个div叠加。这段代码

function showOverlay() 
 { 
   var o = document.getElementById('overlay'); 
   o.style.visibility = 'visible'; 
 } 

 function hideOverlay() 
 { 
   var o = document.getElementById('overlay'); 
   o.style.visibility = 'hidden'; 
 }

如何让这段代码工作，以便我不必为每个我想隐藏/显示的div复制带有新ElementId的javascript？

<a href="javascript:hideOverlay();">hide</a></div>
<a href="javascript:showOverlay();">show</a>

感谢。

Answer 1

请参阅此小提琴http://jsfiddle.net/5sVvA/

将jquery用于此功能

$('.showlink').click(function () {
    $('#' + $(this).attr('rel')).show();
});

$('.hidelink').click(function () {
    $('#' + $(this).attr('rel')).hide();
});

然后根据您要调用的函数和<a>创建showlink个类hidelink或rel='XXX'或任何类的链接，其中XXX是div的ID要显示/隐藏，您必须为要隐藏或显示的每个div创建一个新的rel链接。

如果我误解了你的问题，请告诉我。

要将其设置为默认隐藏，您必须在css display: none;中使用默认情况下要隐藏的div，然后如果单击隐藏，则没有任何内容（已隐藏！）但是在显示中，它会出现，如果你再点击隐藏，它会再次隐藏：）

关于css上的rel资源，你不能，它是HTML属性，而不是css，你必须在<a>标记上设置它。

要在其div中隐藏文字，您可以使用此http://jsfiddle.net/robhunter/5sVvA/1/并将其调整为您的代码，基本上您默认将其设置为隐藏，当您点击show链接时，您会发现隐藏链接并显示出来。

使用此代码，您必须使用此格式为每个链接设置id

rel + hidelink在这种情况下，overlay1hidelink因为rel=overlay1，所以对于rel=overylay2，它将是overlay2hidelink，依此类推......

Answer 2

为同一个类提供所需的所有<a>'s。然后给你以后添加同一个类的任何新<a>'s。

然后使用document.getElementsByClassName document.getElementsByClassName

覆盖多个div的div

2 个答案: