javascript - 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 处理的吗？这对于确定问题的答案有些重要，因此我的回答本来就有点笼统。

我正在描述的以下方法假定列表项中有具有 href 属性的 a 标签。

首先使用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;
}

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