SSI 导航栏，高亮选中的选项

Question

我有一个导航栏，我在一个小型网站的每个页面中都使用了 SSI。像这样的：

<ul>
   <li><a href="option1.shtml">option 1</a></li>
   <li><a href="option2.shtml">option 2</a></li>
   <li><a href="option3.shtml">option 3</a></li>
</ul>

在每个页面中，我想突出显示选定的选项（可能用粗体）并禁用“self”链接。

由于我没有使用任何服务器端技术，如 PHP 或 .NET，我认为这可以使用 JavaScript 来实现。

非常感谢。

Answer 1

您列出的示例的有趣之处在于选项实际上是链接！链接是用 Javascript 处理的吗？这对于确定问题的答案有些重要，所以我的回答本质上会有点笼统。

我所描述的以下方法假设列表项中有a 带有href 属性的标签。

首先使用document.URL 获取当前页面的URL。将其存储在变量url 中。然后使用 url.substr(url.search('www.beginning.com/of/URL/before/links/start/')) 获取链接中的 URL 部分，例如index.html。最后找到href="index.html"的链接，用removeAttribute("href")去掉href属性。此外，在元素中添加一个名为 thisPage 的类，以便在 CSS 中突出显示它并删除指针光标：

.thisPage
{
    cursor: default;
    font-weight: bold;
}

请告诉我这是否有帮助以及您是否有任何问题。