The current column is highlighted
JS determines the current URL to highlight the current column. The key point is that indexOf is used to determine the position of the first occurrence of the two strings. If it does not appear, it returns -1, if it does, it returns
Others, and define a class with the element where the string that returns other results is located.
HTML
var myNav = document. getElementById("nav").getElementsByTagName("a");
for(var i=0;i
{
var links = myNav[i].getAttribute(" href");
//alert(links)
//alert(myNav[i]);
var myURL = document.location.href;
if(myURL.indexOf(links) ! = -1)
{
myNav[i].className="d";
}
}
The current column is highlighted. I wonder if you understand? If not, let me explain in detail. First, you click on a link, such as: href="http://www.jb51.net/html/list/index_127.htm" title="Information Center">Information Center
What happens to the browser after clicking? Yes, the address bar becomes:
http://www.jb51.net/html/list/index_127.htm
Use document.location.href;
This is the address (http ://www.jb51.net/html/list/index_127.htm).
Then we traverse all the connections on the current web page and obtain the href value of each connection. Traversal code:
var myNav = document.getElementById(" nav").getElementsByTagName("a");
for(var i=0;i{
var links = myNav[i].getAttribute("href") ;
}
Use the indexOf function to compare whether among all the links on the page, there are keywords appearing in http://www.jb51.net/html/list/index_127.htm. If so, indicate
as the current connection, and then modify the style of the current connection. This realizes the highlighting of the current column. Highlighting the current column is a very practical technique, which is especially beneficial in increasing user experience. But in the practical process, you may need to pay attention to some details. For example, the blog of the search bar is connected by an external link. So when processing, should the
of this external link be highlighted when it is clicked? Here It’s just that I think I’d like to talk a little bit about the problems that may occur when the current column is highlighted. Maybe you already have a solution.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
