Implementierung der Navigationsmenühervorhebung basierend auf jquery (zwei Methoden)_Javascript-Kenntnissen-js-Tutorial-php.cn

Implementierung der Navigationsmenühervorhebung basierend auf jquery (zwei Methoden)_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:43:36

Original

1657 Leute haben es durchsucht

Projektanforderungen:

Implementierungsprinzip: Wenn das aktuelle Element ausgewählt ist, fügen Sie dem aktuellen Element einen Stil hinzu und entfernen Sie den Stil aus dem Element derselben Ebene.

Klicken Sie auf verschiedene Navigationsmenüs, um das aktuell angeklickte Menü hervorzuheben. Klicken Sie auf eine Kategorie unter der Navigation. Die Navigation, zu der die Kategorie gehört, muss ebenfalls hervorgehoben werden. Klicken Sie auf einen Artikel und auf das Navigationsmenü, zu dem der Artikel gehört muss auch hervorgehoben werden.

Die Darstellung ist wie folgt:

Beispielcode eins:

Der spezifische Beispielcode lautet wie folgt:

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

Nach dem Login kopieren

Beispielcode zwei:

Fügen Sie dem Link auf Menüebene ein rel-Attribut hinzu und speichern Sie das href-Attribut:

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

Nach dem Login kopieren

Vergleichen Sie dann die URL und die URL in der Adressleiste des Browsers. Fügen Sie die Klasse zum aktuellen -Tag hinzu und entfernen Sie die Klasse der anderen

Neueste Artikel des Autors