Home > Developer > JavaScript
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!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
