Zblog implements the highlighting function of the current page of the navigation bar in the js version

Tianxing Studio wrote an article before“ The method of zblogphp navigation to highlight the current page ”This method is only valid for the list page and the first page, but not for the content page.

A while ago, I accidentally turned to the code of a topic to implement this function (I really don't remember which topic it is. Sorry). After learning js for a while, I suddenly understood it So I lent flowers to Buddha and sent out the method, hoping to help friends in need.

This method is very versatile. It supports almost all pages (home page, list page, content page, single page, etc.) and has good applicability. Well, let's start with the code.

Js section:

 <script> $(function(){     var surl = location.href; var surl2 = $(".place a:eq(1)").attr("href"); $("#nav ul li a").each(function() { if ($(this).attr("href")==surl || $(this).attr("href")==surl2) $(this).parent().addClass("on") }); }); </script>

To try to explain the above code:

First, your navigation bar must have an id attribute of "nav", and then your website must have a breadcrumb navigation class attribute of "place"（ Set writing method of zblogphp breadcrumb navigation ）。

In the js part, you can go through the second<a>url of the breadcrumb, and then look up the navigation bar to see which<a>url is the same as the url in the breadcrumb just now. If the url is the same, you can conclude that this is the part that needs to be highlighted, and then add an "on" class to the<li>that needs to be highlighted in the navigation bar. The js section is complete.

Add a highlighted css:

 #nav ul li.on a{color:red;}

The above CSS only adds a red font effect to the highlighted ones. Please adjust the specific effect according to your website.

Having said so much, if you don't understand js and html, it must be cloudy and foggy Then you are welcome to contact us for payment (escape