Скрыть элементы на сайте Jimdo, используя jquery по определенному атрибуту данных
Я создаю интернет-магазин Jimdo. Для целевой страницы я хотел бы скрыть панель навигации.
Я определил класс элемента и могу скрыть его с помощью CSS, но я хочу скрыть его только на одной странице. Поскольку я могу только вставить код в заголовок, мне нужно идентифицировать страницу по выбранному пункту меню.
<div class="nav">
<ul>
<li><a data-link-title="Home" class="active">Home</a></li>
...
</ul>
</div>
Как я могу скрыть div с классом nav когда ссылка в списке имеет data-link-title="Home" и class="active"?
Заранее спасибо!
1 ответ
Хорошо, мне удалось сделать это самому. Чего я хотел добиться, так это показать заголовок в полноэкранном режиме, скрывая все остальное, чтобы получить целевую страницу. Поскольку Jimdo применяет один шаблон ко всем страницам, невозможно достичь этого эффекта без этого решения.
Я нашел другой обходной путь, вставив html виджет на страницу с img а затем стиль его, чтобы быть на весь экран и прикрыть остальное, увеличив z-index, Я нахожу это довольно уродливым, так как весь контент все еще там и в основном виден. Это также дало странные эффекты на мобильном телефоне.
Дайте мне знать, если у вас есть лучшее и / или более чистое решение. Надеюсь, это поможет кому-то!
$(document).ready(function() {
if (document.getElementById("test")) {
var theHeader = document.querySelector(".header");
theHeader.classList.add("fullscreen");
$('.nav').hide();
$('.content').hide();
$('.footer').hide();
}
});.nav {
background: #ffcc00;
}
.header {
background: #ccff00;
}
.content {
background: #00ccff;
}
.footer {
background: #cc00ff;
}
.fullscreen {
min-height: 100vh;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body id="test">
<div class="nav"> </div>
<div class="header"> </div>
<div class="content"> </div>
<div class="footer"> </div>
</body>
</html>