Home > Article > Web Front-end > .active is used dynamically to achieve navigation effects

.active is used dynamically to achieve navigation effects

php中世界最好的语言Original: 2018-04-19 15:49:421970browse

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!

.active is used dynamically to achieve navigation effects

Related articles