Проблема вот в чем — при неактивной страницу (когда в браузере не переключаемся на другие страницы) все нормально. При нажатии на элементы меню все работает нормально, если страница активна, то через некоторое время (около 30 секунд) при нажатии на пункт меню не происходит переключения, через секунд 10-15 все становится нормально.
Браузер — Safari
ОС — Mac OS
<div id="menu">
<button data-target="onhero">Главная</button>
<button data-target="onitems">Продукты</button>
<button data-target="onabout">О компании</button>
<button data-target="oncontact">Контакты</button>
<button data-target="oncard">Корзина</button>
</div>
<div id="hero">
<h1>Тестовый элемент верстки и заголовков</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus ipsa rerum cumque architecto officia dolorem eaque aspernatur maxime? Illo architecto sapiente vero veniam quasi, corporis quaerat minima quibusdam consequuntur exercitationem!</p>
<button data-target="onitems">Смотреть продукты</button>
<button data-target="oncontact">Контакты</button>
</div>
<div id="about">
<h2>О сервисе Fohover Distance Service Gate Pro</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex nesciunt autem sapiente sed possimus quos ab repellat, eaque nihil fugiat cupiditate, eius similique eum, tempora illo aspernatur sit eveniet iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima vel quas ipsum pariatur neque consectetur, aperiam earum. Dolores aliquid rerum aperiam commodi id fuga, iste minus mollitia qui fugit aliquam?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex ipsa doloribus, nisi doloremque in magnam repudiandae molestias deleniti, quis sed impedit architecto earum quasi nam reprehenderit fuga? Tenetur, quisquam excepturi!</p>
</div>
<div id="contact">
<h2>Контакты Fohover</h2>
<p>alexdeg2015@icloud.com</p>
<p>tlg.io/user@alexdeg2015</p>
<p>instagram.com/@alexdeg2015</p>
</div>
<div id="items">
<h2>Продукты компании Fohover</h2>
</div>
<div id="card">
<h2>Корзина</h2>
</div>
'use strict';
menu();
hero();
about();
contact();
items();
card();
function menu() {
var menu = document.querySelector('#menu');
var body = document.querySelector('body');
body.children[1].style.display = 'block';
}
function hero() {
var hero = document.querySelector('#hero');
var body = document.querySelector('body');
addEventListener('click', function(event){
for(var i = 0; i < body.children.length; i++){
if(event.target.getAttribute('data-target') == 'onhero') {
if(body.children[i].getAttribute('id') == 'hero' || body.children[i].getAttribute('id') == 'menu') {
hero.style.display = 'block';
} else {
body.children[i].style.display = 'none';
}
}
}
});
}
function about(){
var about = document.querySelector('#about');
var body = document.querySelector('body');
addEventListener('click', function(event){
for(var i = 0; i < body.children.length; i++){
if(event.target.getAttribute('data-target') == 'onabout') {
if(body.children[i].getAttribute('id') == 'about' || body.children[i].getAttribute('id') == 'menu') {
about.style.display = 'block';
} else {
body.children[i].style.display = 'none';
}
}
}
});
}
function contact(){
var contact = document.querySelector('#contact');
var body = document.querySelector('body');
addEventListener('click', function(event){
for(var i = 0; i < body.children.length; i++){
if(event.target.getAttribute('data-target') == 'oncontact') {
if(body.children[i].getAttribute('id') == 'contact' || body.children[i].getAttribute('id') == 'menu') {
contact.style.display = 'block';
} else {
body.children[i].style.display = 'none';
}
}
}
});
}
function items(){
var items = document.querySelector('#items');
var body = document.querySelector('body');
var itemHTML = '';
var itemList = [
{
id: 1,
title: 'Цветная маска для праздника',
cost: 1250,
category: 'Маски',
img: 'img001.jpg'
},{
id: 2,
title: 'Колпак для клоуна',
cost: 750,
category: 'Колпаки',
img: 'img002.jpg'
},{
id: 3,
title: 'Цветная маска кукурузного монстра',
cost: 2050,
category: 'Маски',
img: 'img003.jpg'
},{
id: 4,
title: 'Черно белая маска Панды',
cost: 950,
category: 'Маски',
img: 'img004.jpg'
},{
id: 5,
title: 'Маска кукурузного монстра',
cost: 2500,
category: 'Маски',
img: 'img005.jpg'
},{
id: 6,
title: 'Огромная конфета оранжевого цвета',
cost: 3150,
category: 'Сладости',
img: 'img006.jpg'
},{
id: 7,
title: 'Торт для дня рождения',
cost: 1250,
category: 'Сладости',
img: 'img007.jpg'
},{
id: 8,
title: 'Билет на аттракционы',
cost: 350,
category: 'Билеты',
img: 'img008.jpg'
},{
id: 9,
title: 'Билет в комнату страха',
cost: 350,
category: 'Билеты',
img: 'img009.jpg'
},{
id: 10,
title: 'Билет в комнату смеха',
cost: 350,
category: 'Билеты',
img: 'img010.jpg'
}
];
addEventListener('click', function(event){
itemHTML = '<h2>Продукты компании Fohover</h2><input type="text" placeholder="Праздничный колпак"><button>Найти продукт</button><br>';
for(var i = 0; i < body.children.length; i++){
if(event.target.getAttribute('data-target') == 'onitems') {
if(body.children[i].getAttribute('id') == 'items' || body.children[i].getAttribute('id') == 'menu') {
items.style.display = 'block';
for(var j = 0; j < itemList.length; j++) {
itemHTML += '<div><div></div><h3>' + itemList[j].title + '</h3><p>' + itemList[j].cost + ' руб.</p><p>' + itemList[j].category + '</p></div>';
}
items.innerHTML = itemHTML;
} else {
body.children[i].style.display = 'none';
}
}
}
});
}
function card(){
var card = document.querySelector('#card');
var body = document.querySelector('body');
addEventListener('click', function(event){
for(var i = 0; i < body.children.length; i++){
if(event.target.getAttribute('data-target') == 'oncard') {
if(body.children[i].getAttribute('id') == 'card' || body.children[i].getAttribute('id') == 'menu') {
card.style.display = 'block';
} else {
body.children[i].style.display = 'none';
}
}
}
});
}
