覆盖div为多个div [英] Overlay div for multiple divs

问题描述

我想为多个div制作div覆盖。这段代码的作用是：

$ p $ lt; code> function showOverlay（）
{
var o = document.getElementById（'overlay' ）;
o.style.visibility ='visible';
}

函数hideOverlay（）
{
var o = document.getElementById（'overlay'）;
o.style.visibility ='hidden';
}

如何让这段代码正常工作以便我不必重复为每个div我想隐藏/显示一个新的ElementId的JavaScript？

 < a href =javascript：hideOverlay（）;>隐藏< / a>< / div> 
< a href =javascript：showOverlay（）;> show< / a> 
  

谢谢。

解决方案

看这个小提琴 http://jsfiddle.net/5sVvA/

在这个函数中使用jquery

$ $ $''showlink'）。click（function （）{
$（'＃'+ $（this）.attr（'rel'））。show（）;
}）;
$ b $（'。hidelink'）。click（function（）{
$（'＃'+ $（this）.attr（'rel'））。hide（）;
}）;

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

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

默认情况下将其设置为隐藏，你必须在css display：none; 对于你想默认隐藏的div，那么如果你点击隐藏，什么都不会（它已经隐藏了！），但是在显示时，它会显示出来，如果你然后点击隐藏，它会再次隐藏：）

关于css的rel东西，你不能，它是一个HTML属性，不是css one，您必须将它设置在< a> 标记中。

隐藏文本，你可以使用这个 http://jsfiddle.net/robhunter/5sVvA/1/ ，并将其调整为您的代码，基本上默认情况下将其设置为隐藏，并且当您单击 show 链接，你会找到隐藏链接并显示它。

使用此代码，您必须设置 id 到这个格式的每一个链接

rel + hidelink 在这种情况下它会是 overlay1hidelink 因为 rel = overlay1 ，所以对于 rel = overylay2 它会 overlay2hidelink 等等...

I'd like to make a div overlay for multiple divs. This code does

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

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

How can I make this code work so that I don't have to duplicate the javascript with a new ElementId for each div I'd like to hide/show ?

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

Thanks.

解决方案

See this fiddle http://jsfiddle.net/5sVvA/

Use jquery with this function

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

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

Then create <a> links with class showlink or hidelink or whatever class depending on what function do you want to call and rel='XXX' where XXX is the ID of the div you want to show/hide, you must make a new link with a new rel for each div that you want to hide or show.

If I misunderstood your question please tell me.

To set it hidden by default, you must use in css display: none; for the divs you want to be hidden by default, then if you click on hide, nothing hapens (it is already hidden!) but on show, it will show up, and if you then click on hide, it will hide again :)

About the rel stuff on css, you can't, it is a HTML property, not a css one, you must set it on the <a> tag.

To hide the text among it's div, you can use this http://jsfiddle.net/robhunter/5sVvA/1/ and adapt it to your code, basically you set it hidden by default, and when you click on show link, you find the hide link and show it up.

With this code, you must set an id to each link with this format

rel + hidelink in this case it will be overlay1hidelink because rel=overlay1, so for rel=overylay2 it will be overlay2hidelink and so on...

这篇关于覆盖div为多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！