Javascript、URL 解析、条件 CSS 样式。在导航菜单上显示

Question

好吧，出于某种原因，我的代码在这里不起作用...这是一个用 <ul> 创建的垂直 HTML/CSS 导航菜单和 <li> s ..... 每个列表项都有一个子导航，它将显示另一个列表。基本上，我想让代码读取当前 URL 并有条件地隐藏 ( display: none ) 不适用于指定 URL 的子导航...

显然，我会为每个导航项重复此代码。

为什么当我向 display:none 询问元素 ID 时？ ，它不会工作...呃。请帮忙。

见附件。谢谢!

    <script type="text/javascript">
    var URL = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;

    var pathArray = window.location.pathname.split('/');
    document.write(URL);
        document.write("<br/>");
    document.write(pathArray[1]);
        document.write("<br/>");
    document.write(pathArray[2]);
        document.write("<br/>");
    document.write(pathArray[3]);
        document.write("<br/>");
    if (pathArray[2] == "general")
     {
      document.getElementById("cd").style.display = 'none';
        document.getElementById("id").style.display = 'none';
          document.getElementById("sd").style.display = 'none';
         } 


</script>

    <!-- Left Navigation starts here -->
            <!-- if IE -->
            <div id="IE_nav">
            <!-- endif IE -->
            <div id="left_nav">
                <ul>
                    <a href="#"><li class="nav_button">NAV ITEM 1</li></a>
                                <li class="sub_nav_box" id="gd">
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    <li><a href="#">Sub-Item 2</a></li>
                                    </ul>
                                </li>
                    <a href="#"><li class="nav_button">NAV ITEM 2</li></a>
                                <li id="cd" class="sub_nav_box">        
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    <li><a href="#">Sub-Item 2</a></li>
                                    </ul>
                                </li>
                    <a href="#"><li class="nav_button">NAV ITEM 3</li></a>
                                <li class="sub_nav_box" id="id">
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    </ul></ul>
                            </div></div>

Answer 1

那是你试图在定义之前访问一些 DOM 元素

将您的脚本移到您的 html 之后，它将起作用。

<!-- Left Navigation starts here -->
......

然后是你的脚本

<script type="text/javascript">
    var URL = window.location.protocol + "://" + window.location.host + "/" +      window.location.pathname;
......

或者为了获得更好的结果，请使用 dom 就绪事件来触发您的脚本。这可以使用 jquery 轻松实现

$(function () {
// your script here
...
});