Use js search method to realize the code of highlighting the current column

Use js search method to realize the code of highlighting the current column_javascript skills

WBOY

Release： 2016-05-16 19:07:41

Original

1474 people have browsed it

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

Copy code The code is as follows:

jb51.net/html/list/index_127.htm" title="Information Center">Information Center

< a href="http://www.jb51.net/html/list/index_1.htm" title="Network Programming">Network Programming

Operating System< ;/a>

">Classic net excerpt

< li>Website skills

Free resources

About us

Article Search

Copy code The code is as follows:

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:

Copy code The code is as follows:

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.