Use js search to highlight the current column. The current column is highlighted.
JS determines whether the current URL is highlighted in the current column. The key is to use indexOf to determine the first position of the two strings. If no value is displayed,-1 is returned. If no value is displayed,-1 is returned.
Others, and define a class with the element of the string that returns other results.
HTML
The Code is as follows:
- Information Center
- Network Programming
- Database
- Script Column
- Practical Skills
- Software Programming
- Create a web page
- Operating System
- Classic Network Abstract> classic network Abstract
- Website skills
- Free Resources
- About us
- Article Search
JS
The Code is as follows:
Var myNav = document. getElementById ("nav"). getElementsByTagName ("");
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 ";
}
}
Do you understand the current column highlighted? If you don't have one, let me explain it in detail. First, click a connection, for example:
Href = "http://www.jb51.net/html/list/index_127.htm" title = "Information Center"> Information Center
What changes have taken place in the browser after clicking? Yes, the address bar is changed:
Http://www.jb51.net/html/list/index_127.htm
Use document. location. href;
This address (http://www.jb51.net/html/list/index_127.htm) is obtained ).
Then we traverse all the connections on the current web page and obtain the href value for each connection. Code for traversal:
The Code is as follows:
Var myNav = document. getElementById ("nav"). getElementsByTagName ("");
For (var I = 0; I {
Var links = myNav [I]. getAttribute ("href ");
}
Use the indexOf function to compare whether all the connections on the page are found in http://www.jb51.net/html/list/index_127.htm. If yes, the table
If it is the current connection, modify the style of the current connection. This enables the current column highlight display. The current column highlight display is a very practical skill, especially in increasing user experience.
It is advantageous. However, in the practical process, you may need to pay attention to some details. For example, if a blog in the search bar is connected by an external link, click the external link during processing.
When? I think the problem may occur when the current column is highlighted. Maybe you have a solution.
