0

我目前正在处理的网站上有一个 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>

这在主页上可以正常工作 - 默认情况下所有子导航都被隐藏 - 但是，例如，如果用户进入“关于”页面，我希望默认显示公司导航子导航。

我不知道 JS 或 CSS 是否会实现这一点，而且我有点生疏，所以我会很感激任何建议。谢谢。

4

1 回答 1

0

您可以为各个页面添加一个idfor body 标签，并通过 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;
}

希望这可以帮助。

于 2013-05-23T09:48:22.450 回答