Maison >interface Web >js tutoriel >.active est utilisé dynamiquement pour obtenir des effets de navigation
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 =""; } } })
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>
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!