我当前正在使用的网站上有一个 Javascript 显示/隐藏导航栏，它显示了一个子导航 onclick。但是，我希望当用户位于网站的该部分时自动显示隐藏的子导航。
这是我的 JS:
<script type="text/javascript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>
这是一个 HTML 示例:
<nav class="sub-nav" id="company-nav" style="display: none;">
<div class="container">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">History</a></li>
<li><a href="#">People</a></li>
</ul>
<img src="/2013/img/blue-nav-arrow.png" border="0" alt="arrow" />
</div>
</nav>
这在主页上运行良好 - 默认情况下隐藏所有子导航 - 但是，例如，如果用户进入“关于”页面，我希望默认显示 company-nav 子导航。
我不知道 JS 或 CSS 是否可以实现这一点，我有点生疏，所以我会很感激任何建议。谢谢。
最佳答案
您可以做的是让各个页面的 body 标签有一个 id，并通过 CSS，如果 id 处于事件状态，则显示子菜单。
例如(关于页面):
HTML:
<body id='about'>
<nav id"company-nav">
<li><a href="#">About</a></li>
<li><a href="#">History</a></li>
<li><a href="#">People</a></li>
</nav>
</body>
CSS:
#about nav#company-id{
display:block;
}
希望这对您有所帮助。
关于javascript - 修改 JS 显示/隐藏以根据页面自动显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16710071/