最初隐藏一个 div 以供以后显示

Posted 2023-02-21

【中文标题】最初隐藏一个 div 以供以后显示

【英文标题】：Initially hiding a div for later display

【发布时间】：2012-07-20 04:33:47

【问题描述】：

我的网页如下：

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>

在此之下，我有 jQuery click 事件，它将被点击的项目的显示设置为继承，其他的设置为无。

$("#btn2").click(function (e) 
    $("#id1").css('display','none');
    $("#id3").css('display','none');
    $("#id2").css('display','inherit');
);

显示和隐藏可以正常工作，但是我确实注意到最初隐藏的 div 中的某些内容没有正确渲染，尤其是被 CSS 操作的元素。本质上，当页面加载时，隐藏的 div 没有正确呈现，并且当它们显示时看起来很丑。正确执行此操作的方法是什么？

编辑:::::::::::::::::::::::::::::::::::::::::::::

我最终将所有最初隐藏的 div 设置为“可见性：无”，然后在页面 onLoad() 事件中设置显示：无。当我切换时，我会同时更改可见性和显示。一切都正确呈现，并且由于事物被静态设置为不可见，因此所有 div 都不会显示丑陋的 2 秒。

【问题讨论】：

如何点击未显示的内容？

我认为你必须更具体一点，“丑陋”并不能真正告诉我们问题是什么，通常这应该可以正常工作，但只是做$("#id1, #id3").hide(); 似乎更简单？我猜你对每个元素都有一个函数，而且这个例子只是用隐藏元素上的点击事件写得不好，否则我倾向于同意上面的评论，如何点击隐藏元素？跨度>

对不起。我打错了。有三个按钮。隐藏 div 内的元素未正确呈现。当我最初取消隐藏所有 div 时，一切都呈现正确。

【参考方案1】：

尝试改用visibility。示例：

$("#id2").click(function (e) 
    $("#id1").css('visibility','hidden');
    $("#id3").css('visibility','hidden');
    $("#id2").css('visibility','visible');
);

display 和 visibility 都会对浏览器行为产生影响。

另一种解决方法是将要隐藏的 div 的 opacity 设置为 0。根据我的经验，这总是有效的，但不太优雅。

---

更新回复评论：在这种情况下，您可以将width 和height 等其他属性设置为0px，将over-flow 设置为hidden，以便div 不占用屏幕上的任何空间。丑陋，但基本，并且有效。

<style>
.hidden 
    visibility: hidden;
    overflow: hidden;
    width: 0px;
    height: 0px;

</style>

<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Aster_Tataricus.JPG/245px-Aster_Tataricus.JPG"/></div>
<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/280px-Chamomile%40original_size.jpg"/></div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Jonquil_flowers06.jpg/320px-Jonquil_flowers06.jpg"/></div>

您可以使用 jQuery 的 addClass 和 removeClass 方法使 div 可见和不可见，例如：$("#id1").removeClass("hidden"); 和 $("#id3").addClass("hidden");。

【讨论】：

我无法使用可见性，因为 div 在技术上仍然存在。 id1 和 id2 占用的空间仍然会偏移 id3，即使它是不可见的。有了可见性，渲染问题就解决了。 Display: none 避免了这种情况，但存在渲染问题。

@user974896 - 在这种情况下，还要设置width、height 和over-flow 属性，如上例所示。

【参考方案2】：

为什么不使用 jQuery show 和 hide？

使用 CSS 在页面加载时隐藏要隐藏的元素（duh）：

#id1, #id2, .. 
    display: none;
 

或者你可以用 Javacript 隐藏它：

$('#id1, #id2, ..').hide();

使用以下方法显示或隐藏它们：

$('#btn2').click(function() 
    $('#id1, #id3').hide();
    $('#id2').show();
);

【讨论】：

切换不是问题。它最初是隐藏 div 并在显示后正确呈现所有内容。

隐藏和显示只不过是在元素上设置 CSS 属性的函数。它只需要几行代码就可以完成这项工作。

我明白，但这仍然不能解决原来的问题。我最初将如何隐藏 div？请记住，其中有 2 个是被隐藏起来的。

【参考方案3】：

最好不要在标记中添加显示逻辑，这样做的更好方法是

.hidden display:none;

.

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff hidden" >
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

.

$(".stuff").click(function () 
    $(".stuff").addClass('hidden');
    $(this).removeClass('hidden');

);

如果您仍然遇到渲染问题，希望对您有所帮助，然后可以尝试

.hidden visibility:hidden; 
.stuffdisplay:block;

【讨论】：

为什么它更好，以及它与 OP 的代码究竟有何不同。除了使用类来改变 CSS 之外，还是一模一样的？

查看除了渲染之外，最好不要将 stlying 与标记混为一谈。

一切都在 CSS 中。我在这里输入它作为示例，因为我不想在这里转储我的网站。我放在这里的基本上就是我想做的。

【参考方案4】：

我喜欢这样： javascript：

$('#btn2').click(function()
    $('#id1').addClass('hidden');
    $('#id3').addClass('hidden');
    $('#id2').removeClass('hidden');
);

css:

.hidden 
    display: none;

html:

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>

【讨论】：

class="hidden" div 中静态隐藏的项目（设置 class="hidden"）在切换时无法正确加载所有元素。

【参考方案5】：

也许 .toggle 可以帮助您实现这一目标？

$("#btn2").click(function (e)  
    $("#id1").toggle(); 
    $("#id2").toggle();
    $("#id3").toggle();
);

【讨论】：

切换有效，但我最初如何隐藏 div 以便它们正确加载。

@user974896 $(document).ready(function() $("#id1").hide(); $("#id2").hide(); $("#id3 ").hide(); );

在页面底部的 JS 加载之前，不是所有的 div 都会短暂显示几秒钟吗？我在我的 onLoad 事件中为 body 设置了相同的逻辑（尽管我正在切换 display=none）。所有的 div 都显示了一两秒钟。我在编辑中的解决方案（从没有可见性开始）解决了这个问题。

@user974896 可以改用 z-index css 样式 - 将其设置在页面后面，然后使用单击功能切换添加命令以将 css z-index 更改为之前的可见状态切换命令。

【参考方案6】：

window.onload = pre_loader;

function pre_loader() 

    javascript:document.getElementById('loader').style.visibility='hidden';

    javascript:document.getElementById('loader').style.opacity=0;

【讨论】：

请解释这个答案如何优于 OP 中的答案