.active is used dynamically to achieve navigation effects-JS Tutorial-php.cn

.active is used dynamically to achieve navigation effects

php中世界最好的语言

Release： 2018-04-19 15:49:42

Original

1975 people have browsed it

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 ="";
 }
 }
})

Copy after login

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>

Copy after login

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!