Вопрос по html, css, javascript, jquery – JavaScript - Скрыть Div при запуске (загрузить)

35

У меня есть div на моей странице php, который использует jQuery, чтобы скрыть его после загрузки страницы. Но есть ли способ скрыть это с самого начала загрузки?

Причина, по которой я спрашиваю, состоит в том, что на короткую секунду вы можете видеть div, когда страница загружается, а затем скрывается, когда страница полностью загружена.

Это выглядит непрофессионально.

Просто интересно, есть ли способ обойти это?

Спасибо

@pylover Ссылки и содержание w3schools устарели, и они не поддерживают свои стандарты в актуальном состоянии. Я недавно выучил это трудным способом, и я предлагаю вам либо посмотреть наdeveloper.mozilla.org/en-US или жеw3.org Selvakumar Arumugam
Я предлагаю вам не w3schools не так часто, как это правильно. Halcyon
W3Fools Derek 朕會功夫
@pylover писал: «Для Оливера достаточно w3schools» ... Вы в основном говорите, что, поскольку Оливер плохо знаком с кодированием, ему может хватить устаревших и наполовину неверных источников? Lodder
w3schools достаточно для Оливера pylover

Ваш Ответ

6   ответов
7

о с помощью скрипта.

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

В этом случае я бы рекомендовал решение CSS от Vega. Но если вам нужно что-то более сложное (например, анимация), вы можете использовать этот подход.

Это имеет некоторые сложности (см. Комментарии ниже). Если вы хотите, чтобы этот фрагмент сценария действительно работал максимально быстро, вы не можете использовать jQuery, использовать только собственный JS и отложить загрузку всех других сценариев.

Error: User Rate Limit Exceeded$("hideme").hide();Error: User Rate Limit ExceededReferenceError...
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededscriptError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
71

Используйте стиль CSS, чтобы скрыть div.

#selector { display: none; }

или используйте его, как показано ниже,

CSS:

.hidden { display: none; }

HTML

<div id="blah" class="hidden"><!-- div content --></div>

и в JQuery

 $(function () {
     $('#blah').removeClass('hidden');
 });
Error: User Rate Limit ExceededtoggleClass('hidden')Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Oliver Jones
1

display: none; & quot; к атрибуту стиля divs? Это все, что делает функция JQuery .hide ().

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
6

Использование CSS для скрытия - не лучшее решение, потому что иногда вы хотите, чтобы пользователи без JS могли видеть div. Самое чистое решение - спрятать div с помощью JQuery. Но div отображается примерно в 0.5 секунды, что проблематично, если div находится вверху страницы.

В этих случаях я использую промежуточное решение, без JQuery. Этот работает и немедленно:

<script>document.write('<style>.js_hidden { display: none; }</style>');</script>

<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>

Конечно, вы можете добавить все эффекты, которые хотите, в div, например, JQuery toggle (). И вы получите лучшее возможное поведение (imho):

for non JS users, the div is visible directly for JS users, the div is hidden and has toggle effect.
0

none для элемента в файле CSS или в атрибуте стиля

#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>

или наличие js сразу после div тоже может быть достаточно быстрым, но не таким чистым

1

не уверен, что это очень хороший способ, но он отлично подходит для моих нужд.

<html>
<head>  
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
</head>
<body>
    <div id="HiddenStuff1" style="display:none">
    CONTENT TO HIDE 1
    </div>
    <div id="HiddenStuff2" style="display:none">
    CONTENT TO HIDE 2
    </div>
    <div id="HiddenStuff3" style="display:none">
    CONTENT TO HIDE 3
    </div>
    <input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
Error: User Rate Limit Exceeded

Похожие вопросы