.active est utilisé dynamiquement pour obtenir des effets de navigation-js tutoriel-php.cn

.active est utilisé dynamiquement pour obtenir des effets de navigation

php中世界最好的语言

Libérer： 2018-04-19 15:49:42

original

2018 Les gens l'ont consulté

Cette fois, je vais vous présenter l'effet navigation utilisant .active dynamiquement. Quelles sont les précautions pour utiliser .active dynamiquement pour obtenir un effet de navigation ? est un cas pratique. Jetons un coup d’oeil.

Obtenez le lien vers la page que vous ouvrez via jq window.location.pathname

Ajoutez un identifiant à votre li en HTML Le nom de l'identifiant est le même que le href dans le lien URL

. Recherchez le li correspondant via la méthode jq include et ajoutez le nom de la classe active

Alors. . Il n'y en a plus. . .

Code jq :

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

Copier après la connexion

Code HTML :

<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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

jQuery définit la taille du zoom de l'image avec la molette de la souris

jQuery implémente la fonction de retour en haut

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!