SSI navigation bar, highlight selected option
I have a navigation bar that I include using SSI in every page of a small site. Something like this:
<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>
In each page I want to highlight the selected option (maybe with bo开发者_如何学Gold) and disable the "self" link.
As I'm not using any Server Side technology as PHP or .NET, I think this could be achieve using JavaScript.
Many thanks.
What's interesting about the example that you list is that the options are actually links! Are the links handled in Javascript? This is somewhat important to determine the answer to the question, so my answer will inherently be a bit general.
The following method I'm describing assumes that there are a
tags with href
attributes in the list items.
First use document.URL
to grab the current page's URL. Store that in a variable url
. Then use url.substr(url.search('www.beginning.com/of/URL/before/links/start/'))
to get the part of the URL that would be in the link-, e.g. index.html
. Finally, find the link with href="index.html"
and use removeAttribute("href")
to remove its href attribute. In addition add a class called thisPage
to the element so that in CSS you can highlight it and remove the pointer cursor:
.thisPage
{
cursor: default;
font-weight: bold;
}
Please tell me if this was helpful and whether you have any questions.
精彩评论