Показать div только на загрузку первой страницы

У меня есть div, который служит контейнером для анимации css, которая отображается на домашней странице всего веб-сайта ... текст и фон, который открывается как занавески, показывая сайт под ним. Это похоже на целевую страницу интро. Дело в том, что мне нужно, чтобы он отображался только при загрузке первой страницы. Я не хочу, чтобы он появлялся на странице обновления, или если кто-то перебирается через сайт и возвращается на домашнюю страницу.Показать div только на загрузку первой страницы

Может кто-нибудь, пожалуйста, покажите мне, как мне было бы кодировать это, потому что я много искал в Интернете и не нашел ясных объяснений для моего конкретного случая.

Вот код DIV:

<div id="landContainer"> 
 
<div class="left-half" id="leftP"><article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article></div> 
 
<div class="right-half" id="RightP"><article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article></div> 
 
</div>

Так ДИВ я должен отображаться только на первой загрузке страницы будет один с ID landContainer, который содержит пару другие divs.

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

Для Яну ... вот содержание моего файла index.html ...

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Landing page v2</title> 
 
     <link rel="stylesheet" type="text/css" href="landing.css" media="screen" /> 
 
    </head> 
 
    <body> 
 
<div id="landContainer"> 
 
    <div class="left-half" id="leftP"> 
 
    <article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article> 
 
    </div> 
 
    <div class="right-half" id="RightP"> 
 
    <article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article> 
 
    </div> 
 
</div> 
 
     <script type="text/javascript" src="scripts/snap.svg-min.js"></script> 
 
     <script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
     <script> 
 
$(document).ready(function() { 
 
    var isExists = localStorage.getItem("pageloadcount"); 
 
if (isExists != 'undefined') { $("#landContainer").hide(); 
 
} 
 
    localStorage.setItem("pageloadcount", "1"); 
 
}); 
 
     </script> 
 
    </body> 
 
</html>

источник

2016-10-12 Denis L.

Вы можете использовать файл cookie или локальное хранилище. В первый раз, когда они нажимают на страницу, проверьте, есть ли у них файл cookie, если не показать div, а затем установите cookie. – Kolby

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Landing page v2</title> 
     <link rel="stylesheet" type="text/css" href="landing.css" media="screen" /> 
<script type="text/javascript" src="scripts/snap.svg-min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script> 
$(document).ready(function() { 
if (localStorage.getItem("pageloadcount")) { $("#landContainer").hide(); 
} 
    localStorage.setItem("pageloadcount", "1"); 
}); 
     </script> 
    </head> 
    <body> 
<div id="landContainer"> 
    <div class="left-half" id="leftP"> 
    <article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article> 
    </div> 
    <div class="right-half" id="RightP"> 
    <article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article> 
    </div> 
</div> 

    </body> 
</html>

источник

2016-10-12 21:16:49

Aaaah! Это работает! Большое спасибо Jayesh! :) Теперь я собираюсь изучить его, чтобы учиться. :) –

$(document).ready(function() { 
 
    var isExists = localStorage.getItem("pageloadcount"); 
 
if (isExists != 'undefined') { $("#landContainer").hide(); 
 
} 
 
    localStorage.setItem("pageloadcount", "1"); 
 
});

<div id="landContainer"> 
 
    <div class="left-half" id="leftP"> 
 
    <article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article> 
 
    </div> 
 
    <div class="right-half" id="RightP"> 
 
    <article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article> 
 
    </div> 
 
</div>

источник

2016-10-12 17:56:05

Не могли бы вы показать мне, как вы будете кодировать этот javascript? Я новичок в этом, и мне действительно нужна эта функция для активного проекта. –

вы можете установить localstorage, когда ваша страница загружается впервые локальноStorage.setItem («pageloadcount», «1»); Затем для доступа вы можете использовать localStorage.getItem («pageloadcount»); если это «1», это означает, что ваша страница загружается один раз. –

Извините за то, что вы новичок, но не могли бы вы показать мне полный пример того, как вы его кодировали бы с моими div, показанными в моем первом посте, пожалуйста? –

Лучший способ является использование сеанса, с помощью которого вы можете мой, если его новый запрос или старый. Сессия на стороне сервера будет лучше всего здесь

источник

2016-10-12 18:00:12

Не могли бы вы показать мне полный пример того, как закодировать это с моими div, показанными в моем первом сообщении? Я очень новичок в javascript. Спасибо заранее! :) –

Я говорю bout сторона сервера не javascript. Вы можете использовать php-сессию. Если ваш серверный язык является php, иначе любой другой –

Показать div только на загрузку первой страницы

ответ

Смежные вопросы