Implémentation de la mise en évidence du menu de navigation basée sur les compétences jquery (deux méthodes)

Implémentation de la mise en évidence du menu de navigation basée sur les compétences jquery (deux méthodes)_javascript

WBOY

Libérer： 2016-05-16 15:43:36

original

1656 Les gens l'ont consulté

Exigences du projet :

Principe d'implémentation : lorsque l'élément actuel est sélectionné, ajoutez un style à l'élément actuel et supprimez le style de l'élément de même niveau.

Cliquez sur différents menus de navigation pour mettre en surbrillance le menu actuellement cliqué. Cliquez sur une catégorie sous la navigation, et la navigation à laquelle appartient la catégorie doit également être mise en surbrillance. Cliquez sur un article, ainsi que le menu de navigation auquel appartient l'article. il faut aussi le souligner. C’est mis en valeur.

Le rendu est le suivant :

Exemple de code un :

L'exemple de code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我爱学习</title>
<style>
body,ul,ol,li,div,p{margin:0px;padding:0px;}
ul{list-style-type:none;border:1px solid blue;background:#4f5b93;height:45px;}
ul li{float:left;heihgt:45px;line-height:45px;width:100px;text-align:center;}
ul li a:link,a:visited{color:#fff;text-decoration:none;}
.act{background:#ff6600;}
</style>
<script src="../jquery.js"></script>
<script>
$(function(){
$('ul li').eq(0).addClass("act");
 $('ul li').each(function(){
  $(this).click(function(){
    $(this).addClass("act").siblings().removeClass("act");
   })
 })
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.52aixuexi.com/">首页</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/suibi/">随笔</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/sucai/">素材</a></li>
<li><a href="http://www.52aixuexi.com/wdwzml/biancheng/">编程</a></li>
</ul>
</body>
</html>

Copier après la connexion

Exemple de code deux :

Ajoutez un attribut rel au lien au niveau du menu et enregistrez l'attribut href :

<div id="menu" class="main-nav">
      <dl>
       <dt><a href="/C000001916" class="current">首页<span class="mnl"></span></a></dt>
      </dl>
      <dl>
        <dt><a href="/C000001919&#63;lmbm=1" <span style="color: #ff0000;">rel="/C000001919&#63;lmbm=1"</span>>新闻中心<span class="mnl"></span></a></dt>
        <dd class="sn-c">
          <a href="#">产品理念2</a>
          <em>|</em>
          <a href="#">发展历程</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
      <dl>
        <dt><a href="/C000001919&#63;lmbm=2" <span style="color: #ff0000;">rel="/C000001919&#63;lmbm=2"</span>>产品介绍<span class="mnl"></span></a></dt>
        <dd class="sn-c sn3">
          <a href="#">产品理念</a>
          <em>|</em>
          <a href="#">发展历程3</a>
          <em>|</em>
          <a href="#">应用范围</a>
          <em>|</em>
          <a href="#">技术架构</a>
        </dd>
      </dl>
    </div>

Copier après la connexion

Comparez ensuite l'URL et le rel dans la barre d'adresse du navigateur. S'ils sont égaux, ajoutez la classe à la balise actuelle et supprimez la classe des autres balises /javascript">

 var urlstr = location.href;　　　　//获取浏览器的url
 var urlstatus=false;　　　　　　　　//标记
　//遍历导航div
 $("#menu a").each(function () {
//判断导航里面的rel和url地址是否相等
  if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
   $(this).addClass('cur'); urlstatus = true;
  } else {
   $(this).removeClass('cur');
  }
 });
//当前样式保持
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

Copier après la connexion

Cela peut aussi produire l'effet, mais s'il y a une catégorie sous la navigation, comme le montre la figure, l'URL de la catégorie et l'URL de navigation ne peuvent pas correspondre, puis l'URL des actualités et l'URL de navigation. ne peut pas correspondre. Donc c'est toujours un peu absurde.....Que devons-nous faire ?

Alors c'est mon idée

Étant donné que les URL sont différentes, recherchez la relation entre navigation-->catégorie-->actualités. Leur relation correspondante est qu'il peut y avoir plusieurs catégories sous une même navigation et qu'il peut y avoir plusieurs articles d'actualité sous une seule. catégorie. Donc en termes inverses, chaque actualité ou catégorie correspond à une navigation. Définissez ensuite une variable sur la page de catégorie et la page d'actualité correspondante, qui est l'identifiant de navigation. Modifiez ensuite la balise ; rel attribut. Comparez cet attribut avec la variable. S'ils sont identiques, changez la classe actuelle.

Le contenu ci-dessus a pour but de vous présenter la mise en évidence du menu de navigation basée sur jquery de deux manières. J'espère qu'il vous sera utile.