This time I will bring you the navigation effect of using .active dynamically. What are the precautions for using .active dynamically to achieve navigation effect? The following is a practical case. Let’s take a look.
Get the link to the page you open through jq window.location.pathname;
Add an ID to your li in HTML. The naming of the id is the same as the href in the URL link
Find the corresponding li through the jq include method and add the active class name to it
Then. . There's no after that. . .
jq code:
$(function() {
varli = $(".title_ul").children("li");
for(vari = 0; i < li.length; i++) {
varurl = window.location.pathname;
varurl = url.replace("/","");
if(url.indexOf(li[i].id)!=-1) {
li[i].firstChild.className ="active";
}else{
li[i].firstChild.className ="";
}
}
})HTML code:
<body> <p class="title"> <ul class="title_ul"> <li id="index"><a href="index.html"rel="external nofollow"class="">页面1</a></li> <li id="zf"><a href="zf.html"rel="external nofollow"class="">页面2</a></li> <li id="gc"><a href="gc.html"rel="external nofollow"class="">页面3</a></li> <li id="hc"><a href="hc.html"rel="external nofollow"class="">页面4</a></li> <li id="shwt"><a href="shwt.html"rel="external nofollow"class="">页面5</a></li> </ul> </p> </body>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
jQuery makes mouse wheel operation picture zoom size
jQuery implements the back to top function
The above is the detailed content of .active is used dynamically to achieve navigation effects. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
