JQuery dynamic addition. active Implementation of navigation effect code details, jquery. active
Code:
Page 4:
Page 5:
Code:
Use jq to get the link to your open pagewindow.location.pathname
;
Adding an ID id to your li in HTML is named the same as the href in the URL link.
Use the jq inclusion method to find the corresponding li to add the active class name to him.
Then .. No more...
Jq code:
$(function () { var li = $(".title_ul").children("li"); for (var i = 0; i < li.length; i++) { var url = window.location.pathname; var url = url.replace("/", ""); if (url.indexOf(li[i].id)!=-1) { li[i].firstChild.className = "active"; } else { li[i].firstChild.className = ""; } }})
Html code:
<Body> <div class = "title"> <ul class = "title_ul"> <li id = "index"> <a href = "index.html" rel = "external nofollow" class = ""> page 1 </a> </li> <li id = "zf"> <a href = "zf.html" rel = "external nofollow" class = ""> page 2 </a> </li> <li id = "gc"> <a href = "gc.html" rel = "external nofollow" class = ""> page 3 </a> </li> <li id = "hc"> <a href = "hc.html" rel = "external nofollow" class = ""> page 4 </a> </li> <li id = "shwt"> <a href = "shwt.html" rel = "external nofollow" class = ""> page 5 </a> </li> </ul> </div> </body>
Summary
The above section describes how to add jQuery dynamically. the code for implementing the active navigation effect is explained in detail. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!