使用jquery按特定数据属性隐藏Jimdo网站上的元素
使用jquery按特定数据属性隐藏Jimdo网站上的元素
提问于 2016-11-08 09:30:19
我正在创建一个Jimdo网络商店。对于登录页面，我想隐藏导航栏。
我已经确定了元素的类，并可以通过CSS隐藏它，但我只想在一个页面上隐藏它。因为我只能将代码注入到标题中，所以我需要通过所选的菜单项来标识页面。
<div class="nav">
<ul>
<li><a data-link-title="Home" class="active">Home</a></li>
...
</ul>
</div>当列表中的链接具有data-link-title="Home"和class="active"时，如何隐藏包含类nav的div
提前感谢！
回答 1
Stack Overflow用户
发布于 2016-11-08 19:55:29
好的，我自己设法做到了。我想要实现的是，在全屏显示标题的同时隐藏所有其他部分，从而实现一个登录页面。由于Jimdo将一个模板应用于所有页面，因此如果没有此解决方案，则不可能实现此效果。
我确实发现了一种不同的解决方法，使用img将html小部件插入到页面中，然后将其样式设置为全屏，然后通过增加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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40477539
复制相关文章
相似问题
腾讯云开发者
