私はJimdo Webshopを作成しています。ランディングページについては、ナビゲーションバーを非表示にしたいと思います。特定のデータ属性でjqueryを使用してJimdoウェブサイトの要素を隠す
私は要素のクラスを特定してCSSで非表示にすることができますが、1ページで非表示にしたいだけです。ヘッダーにのみコードを挿入できるので、選択したメニュー項目でページを識別する必要があります。リスト内のリンクをdata-link-title="Home"とclass="active"を持っているとき、私はクラスnavとdivを非表示にすることができますどのように
<div class="nav">
<ul>
<li><a data-link-title="Home" class="active">Home</a></li>
...
</ul>
</div>
？
ありがとうございます！
私はそれを自分で行うことができました。私が達成したいのは、ヘッダーをフルスクリーンで表示し、残りのすべてを隠して、リンク先ページを達成することでした。 Jimdoは1つのテンプレートをすべてのページに適用するため、この解決策を取らずにこの効果を達成することはできません。
私は、ウィジェットを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>