JavaScript、URL 解析、字符串操作、导航

Question

下面是我用 HTML/CSS/Javascript 创建的垂直导航菜单的脚本。您会注意到导航菜单是使用列表（ul 和 li 的）创建的...

我的问题是这样...

我希望每个链接都以粗体显示，并且当它位于该页面上时在其前面显示一个 »。

有了 Javascript，我该怎么做呢？每个页面都有一个与链接非常相​​似的文件夹（例如，子项 1 的路径为 sitename.com/path/sub-item-1）...

我假设我可以以某种方式获取 URL（其中我已经在代码中完成了），以某种方式从链接中获取字符串...然后重新插入该字符串，但在其中添加一个和»。

编辑：我应该提到...此导航是插入到我的所有页面中的包含内容，因此，在每个文档上手动添加粗体和»并不是解决此问题的可行解决方案。

感谢您的帮助！

    <!-- Left Navigation starts here -->
            <!-- if IE -->
            <div id="IE_nav">
            <!-- endif IE -->
            <div id="left_nav">
                <ul>
                    <a href="#"><li id="nav_1" class="nav_button">NAV ITEM 1</li></a>
                                <li class="sub_nav_box" id="sub-nav-1" style="display: none;">
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    <li><a href="#">Sub-Item 2</a></li>
                                    </ul>
                                </li>
                    <a href="#"><li id="nav_2" class="nav_button">NAV 2</li></a>
                                <li class="sub_nav_box"  id="sub-nav-2" style="display: none;">     
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    <li><a href="#">Sub-Item 2</a></li>
                                    </ul>
                                </li>
                                    </ul>
            </div></div>

            <script type="text/javascript">

    var URL = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;

    var pathArray = window.location.pathname.split('/');

if (pathArray[2] == "nav_1")
 {
  document.getElementById("#").style.display = 'block';
  document.getElementById('#').className = 'nav_selected';
 } 

if (pathArray[2] == "nav_2")
{
  document.getElementById("#").style.display = 'block';
  document.getElementById('#').className = 'nav_selected';
}
</script>

您基本上可以忽略到目前为止我所拥有的内容（因为它按照我需要的方式工作），但是我如何在子项链接前面放置一个»并将它们设为粗体...使用javascript。

再次感谢！

Answer 1

当每个文件夹中有另一页时。您可能还有每个页面的另一个文件。
那么您可以在每个文件夹中的每个文件中手动将类添加到特定导航项吗？

假设您不使用 PHP 或其他东西在主布局/索引中“包含”页面。

当您使用要包含的内容时（在本例中为导航本身）：

您可以用斜杠 / 分隔 URL。
就像你的脚本一样，但那里有一些错误。
这里有更好的东西：

URL：http://site.ext/path/sub-item-1/

var url = window.location.href;
url = url.split('/');
url = url[4];

/*
4 because:
0 = http:
1 = <nothing between the two slashes>
2 = site.ext
3 = path
4 = sub-item-1/
*/

document.getElementById(url).className = 'active';

假设您正在使用 PHP：

您可以添加 PHP 片段每个导航项目并回显其中的类。
那么您将永远不会在客户端遇到 JavaScript 问题。

<li<?php echo ($_GET['page'] == 'sub-item-1' ? ' class="active"' : ''); ?>>Sub Item 1</li>

要将文本加粗并添加 »:

您必须使用 CSS 来执行此操作：

li.active {
    font-weight: bold;
}
li.active:before {
    content: "» ";
}