Use js lookup to display the highlighted code of the current topic

Highlight the current topic
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
Copy codeThe Code is as follows:
<Div id = "nav">
<Ul>
<Li> <a href = "http://www.jb51.net/html/list/index_127.htm" title = "Information Center"> <span> Information Center </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_1.htm" title = "network programming"> <span> network programming </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_104.htm" title = "Database"> <span> database </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_96.htm" title = "script column"> <span> script column </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_7.htm" title = "Practical Skills"> <span> practical skills </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_84.htm" title = "software programming"> <span> Software Programming </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_8.htm" title = "webpage creation"> <span> webpage creation </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_86.htm" title = "Operating System"> <span> Operating System </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_11.htm" title = "Classic Network Abstract"> <span> classic network Abstract </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_27.htm" title = "website Tips"> <span> website tips </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_99.htm" title = "free resources"> <span> free resources </span> </a> </li>
<Li> <a href = "http://www.jb51.net/html/list/index_54.htm" title = "About Us"> <span> about us </span> </a> </li>
<Li> <a href = "http://www.jb51.net/search.asp" title = "Article Search"> <span> Article Search </span> </a> </li>
</Ul>
</Div>

JS
Copy codeThe Code is as follows:
Var myNav = document. getElementById ("nav"). getElementsByTagName ("");
For (var I = 0; I <myNav. length; 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, <li> <
Href = "http://www.jb51.net/html/list/index_127.htm" title = "Information Center"> Information Center </a> </li>
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:
Copy codeThe Code is as follows:
Var myNav = document. getElementById ("nav"). getElementsByTagName ("");
For (var I = 0; I <myNav. length; 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.