是否有一种方法来阻止隐藏文本出现时加载，然后消失

Is there a way to stop hidden text appearing when loading and then disappearing?

本文关键字：文本 隐藏 加载 消失 然后 方法 一种 是否      更新时间：2023-09-26

我有一个div，其中包含使用下拉菜单动态选择的文本。当我的页面加载文本显示消失之前，一旦页面已完全加载。有什么办法能阻止这种事发生吗?因为我只希望文本出现，一旦它被选中。

HTML: 

<select id="selectMe">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option> </select>
<div class="group" id="option1">asdf</div>
<div class="group" id="option2">Tilt.</div>
<div class="group" id="option3">zxcv</div>
<div class="group" id="option4">qwerty</div>
Jquery: 

(function($) {
$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
})
})
})(jQuery);

必须在代码运行之前隐藏。使用CSS: 

.group { display: none }

默认隐藏它们:

.group {
    display: none;
}

或者，如果您需要它们仍然占用块空间(以防止页面"跳转"):

.group {
    visibility: hidden;
}

JavaScript还有另一种方法:-

document.getElementById("option1").innerHTML="asdf";

通过使用这个，你可以在开始时保持div(文本要显示的地方)为空，这样在需要之前就不会有文本显示的机会，当用户单击选项时，JS会将此文本添加到div中!

您可以使用innerhtml引入display:none规则，以避免在jQuery/javascript不可用的情况下隐藏它。

基本上，在body标签之前你可以这样做:

<script>
  var el=document.body;
  el.innerHTML = "<style>.group {display: none;}</style>";
</script>

它将隐藏.group元素，直到jQuery加载并生效。

如果由于某些原因javaScript不可用，则不会隐藏任何内容。

你可以在这里玩:http://codepen.io/anon/pen/khbnp

删除jQuery后的版本http://codepen.io/anon/pen/tjraw

没有jQuery和javaScript的版本http://codepen.io/anon/pen/disut实际上显示了以前版本隐藏的内容

相关文章：