Javascript 最初隐藏一个div以便以后显示

我的网页如下所示：

<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>

显示和隐藏工作正常，但是我确实注意到最初隐藏的div中的某些内容没有正确渲染，特别是CSS操纵的元素。本质上，当页面加载时，隐藏的div不能正确呈现，当它们被显示时，事情看起来很难看。如何正确地做到这一点

编辑：

---

我最后做的是将所有最初隐藏的div设置为“visibility:none”，然后在pages onLoad（）事件中设置display:none。切换时，会同时更改可见性和显示。所有内容都正确渲染，并且由于内容被静态设置为不可见，因此所有div显示的时间都不会超过2秒。

尝试使用

可见性

。例如：

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

显示

和

可见性

都会对浏览器行为产生影响

另一种解决方法是将要隐藏的div的

不透明度设置为
0
。根据我的经验，这总是有效的，但不那么优雅


更新以回复评论：在这种情况下，您可以将其他属性，如
宽度
和
高度
设置为
0px
和
过流
设置为
隐藏
，这样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>


.隐藏{
可见性：隐藏；
溢出：隐藏；
宽度：0px；
高度：0px；
}

您可以使用jQuery
addClass
和
removeClass
方法使div可见和不可见，例如：
$（“#id1”）。removeClass（“隐藏”）和
$（“#id3”）.addClass（“隐藏”）
最好不要将显示逻辑添加到标记中，这样做的更好方法是

.hidden{ display:none;}


希望这能帮助你，如果你仍然有渲染问题，那么可以试试

.hidden{ visibility:hidden; }
.stuff{display:block;}

为什么不使用jQuery
show
和
hide

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

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

也可以使用JavaScript将其隐藏：

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

使用以下命令显示或隐藏它们：

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

我喜欢这样做：

javascript:

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

css:

html:


文本、表单和其他内容
文本、表单和其他内容
文本、表单和其他内容
DD
DD
DD
也许。切换可以帮助您实现这一点吗

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

如何单击未显示的内容？我想你必须更具体一点，“丑陋”并不能真正告诉我们问题是什么，通常这应该可以正常工作，但只需执行
$（“#id1，#id3”）.hide（）似乎更简单？我猜每个元素都有一个函数，这个例子写得很糟糕，隐藏元素上的点击事件，否则我倾向于同意上面的评论，点击隐藏元素怎么办？对不起。我打错了。有三个按钮。隐藏div中的元素未正确渲染。当我最终取消隐藏所有的div时，一切都呈现正确。为什么它更好，是什么让它与OP的代码不同。除了使用类来改变CSS，它仍然是完全一样的？参见addition to do with rendering，它的最佳实践是不要将STLY与Markup混合。一切都在CSS中。我在这里输入它作为一个例子，因为我不想在这里转储我的网站。我放在这里的基本上就是我想做的。我不能使用可见性，因为从技术上讲div仍然在那里。id1和id2占用的空间仍然偏移id3，即使它不可见。通过可见性，解决了渲染问题。显示：无可避免，但存在渲染问题。@user974896-在这种情况下，请设置
宽度
、
高度
和
过流
属性，如上例所示。切换工作正常，但如何在开始时隐藏div以便正确加载它们。@user974896$（文档）。就绪（函数（）{$(“#id1”）.hide（）；$（“#id2”）.hide（）；$（“#id3”）.hide（）；}）；在加载页面底部的JS之前，所有的div不会短暂显示几秒钟吗？我在body的onLoad事件中使用了相同的逻辑（尽管我切换display=none）。所有div都显示了一两秒钟。我在编辑中的解决方案（从“可见性无”开始）解决了这个问题。@user974896可以改用z-index css样式-将其设置在页面后面，然后使用“单击”功能切换“添加”命令，将css z-index更改为切换命令之前的可见状态。class=“hidden”divs中静态隐藏的项（set class=“hidden”）切换时不要正确加载它们的所有元素。切换不是问题。它最初隐藏div，并在它们显示后使所有内容都正确呈现。隐藏和显示只不过是在元素上设置CSS属性的函数。它只需要几行就可以完成这项工作。我理解，但这仍然不能解决原始的issue。我最初如何隐藏DIV？请记住其中两个是隐藏的。请解释这个答案如何优于OP中的答案
$('#btn2').click(function() {
    $('#id1, #id3').hide();
    $('#id2').show();
});

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

.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>

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

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

window.onload = pre_loader;

function pre_loader() {

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

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

}