Question

我有一个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);

Answer 1

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

.group { display: none }

Answer 2

默认情况下只需隐藏它们：

.group {
    display: none;
}

或者，如果你需要它们仍然占据块空间（以防止页面＆＃34;跳跃＆＃34;）：

.group {
    visibility: hidden;
}

Answer 3

使用JavaScript还有另一种方法： -

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

通过使用它，你可以在开始时将div（显示文本的位置）保持为空，这样在需要之前就不会显示文本，当用户点击选项时，JS只会将此文本添加到div！

Answer 4

您可以使用innerhtml来引入display:none规则，以避免隐藏它，即使jQuery / javascript不可用。

基本上，在身体标签之前，你可以这样做：

<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的版本实际上显示了以前版本隐藏的内容

有没有办法阻止加载后出现隐藏文字然后消失？

4 个答案: