Exemple de partage jQuery ajoute dynamiquement .active pour obtenir le code d'effet de navigation-js tutoriel-php.cn

Exemple de partage jQuery ajoute dynamiquement .active pour obtenir le code d'effet de navigation

小云云

Libérer： 2017-12-29 11:45:44

original

1901 Les gens l'ont consulté

Cet article présente principalement les idées de code détaillées pour ajouter dynamiquement .active dans jQuery pour obtenir des effets de navigation. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Idées de code :

Page 4 :

Page 5 :

Idée de code :

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

Trouvez le li correspondant via la méthode jq include et ajoutez le nom de la classe active à ça

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

code jq :

$(function () {
 var li = $(".title_ul").children("li");
 for (var i = 0; i < li.length; i++) {
 var url = window.location.pathname;
 var url = 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

Recommandations associées :

À propos de jQuery pour obtenir un effet de navigation de positionnement

Effet de navigation déroulant en haut de l'applet WeChat

Native js réalise un effet de navigation secondaire pour le commerce électronique

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!