Maison > Article > interface Web > .active est utilisé dynamiquement pour obtenir des effets de navigation

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

php中世界最好的语言original: 2018-04-19 15:49:421971parcourir

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!

php jquery html location href li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：EasyUI combine la structure arborescente zTree pour créer des pages WebArticle suivant：EasyUI combine la structure arborescente zTree pour créer des pages Web

Articles Liés

Voir plus