jquery implements the method of displaying the background color when clicking a link

This article mainly shares with you a jquery method to realize clicking a link and displaying the background color of the a link after jumping. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

I encountered this problem when I was working on a project. Logically speaking, as long as someone knows how to use templates, such low-level problems should not occur. Then there is no template in my background, and my js and jquery skills are at the elementary school level, so this has troubled me for nearly an afternoon. Let me summarize it here and share it with you. Sharing makes me happy! ! !

1. Please look at the code and let me analyze it

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

2. Get the value of the url of the page after the jump. Just compare

3. You need to pay attention here. Print it yourself to see how to get the values ​​for comparison.

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

2. Implementation process

The most fearful thing about blogging is that the analysis is as fierce as a tiger, and the actual operation is 0/5, so here are some steps to analyze:

This is the process of debugging and comparison.

The above is the href value of the obtained link a. It should be noted here that because it is in a loop state, there are many href values ​​of a link.

The following is the value of obtaining the url of the page. As can be seen from the picture, the two are not equal. There is a slight difference, but the impact is not big.

3. jquery’s interception of strings

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

1. jquery’s lastIndexof returns the position where the symbol last appeared, that is, a number.

Can we get the url from this? Where it appears

2, substring is a function that intercepts a string. What we mean here is that interception starts from the 0th position, and the intercepted length is the length value.

3. After the interception is successful:

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

Compare the URLs and add some styles if they are equal.

4. Realize the effect

This is the rendering. When the "Device Classification" column is clicked, the page jumps and displays pink after the jump, indicating that the current page is this page.

end.

Finally, I really don’t know how to use this markdown editor. I have written it several times, but the layout is still as bad as ever. . . I don’t know how to use it, I don’t know how to use TOT

Related recommendations:

JS Click the link to switch to display hidden content

html Use href to implement an example of clicking on a link to pop up a file download dialog box

JS implementation method of clicking on a link to switch to displaying hidden content

The above is the detailed content of jquery implements the method of displaying the background color when clicking a link. For more information, please follow other related articles on the PHP Chinese website!