Click link a in jquery. After the jump, the background color is displayed at the link.

Click link a in jquery. After the jump, the background color is displayed at the link.

This problem occurs during project creation. It is reasonable to say that this low-level problem should not occur as long as the template is set. Then I didn't have a template in the background, and my js and jquery levels were at the elementary level, which also plagued me for nearly one afternoon. Here, I would like to share it with you. Sharing makes me happy !!!

1. Check the code for analysis.

1. First, menu represents my menu list, and tag a is the clicked link. The general idea is to first obtain the object of Link a, then loop through and first obtain the href value of link.

2. Get the url value of the page after the jump. Make a comparison.

3. Please note that you can print it and see how to compare the values.

4. After comparison, if the Url is the same, remove the class attribute of the previous a object and add a style to the current a link.

II. Implementation Process

What I am most afraid of writing a blog is that an analysis is fierce, and the actual operation is 0/5. So here we will perform some step analysis:

This is the process of debugging and comparison.

The above is the href value of the obtained a link. Note that there are many href values of the link because they are in the loop state.

The following shows the url value of the page. As shown in the figure, the two are not equal, but there are slight differences, but the effect is not great.

Iii. String truncation by jquery

var length = String(window.location).lastIndexOf('?');var url = String(window.location).substring(0,length);

1. The lastIndexof of jquery returns the position of the last occurrence of the symbol, that is, a number.

So we can get the url? Location

2. substring is a function used to intercept strings. Here, it indicates that the length is the length value starting from 0th bits.

3. After successful interception:

 if ($($(this))[0].href == url) {  $('#menu li a').removeClass("selected");  $(this).parent().addClass('selected');  }

In comparison, if the url is equal, some styles are added.

IV. Implementation results

That's it. When you click the "device category" column, the page jumps to the page and pink is displayed after the jump, indicating that the current page is the page.

End.

In the end, the markdown editor is really useless. After writing it several times, the layout is still as hot as ever... No. no. no. TOT is used.

In the above jquery implementation, click the link. After the jump, the method for displaying the background color at the link is to share all the content with you through the editor. I hope to give you a reference, we also hope that you can support the customer's home.