suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung der Navigationsmenühervorhebung basierend auf jquery (zwei Methoden)_Javascript-Kenntnissen

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

WBOY
WBOYOriginal
2016-05-16 15:43:361631Durchsuche

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>

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>

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

 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>

Dies kann grundsätzlich auch den Effekt erzielen, aber wenn sich unter der Navigation eine Kategorie befindet, wie in der Abbildung gezeigt, können die Kategorie-URL und die Navigations-URL nicht übereinstimmen, und dann die Nachrichten-URL und die Navigations-URL kann nicht zusammenpassen. Es ist also immer noch ein bisschen Unsinn .....Was sollen wir tun?

Das ist also meine Idee

Da die URLs unterschiedlich sind, suchen Sie nach der Beziehung zwischen Navigation-->Kategorie-->Nachrichten. Ihre entsprechende Beziehung besteht darin, dass es unter einer Navigation mehrere Kategorien und unter einer mehrere Nachrichtenartikel geben kann Kategorie. Umgekehrt entspricht jede Nachricht oder Kategorie einer Navigation. Definieren Sie dann eine Variable auf der entsprechenden Kategorieseite und Nachrichtenseite. Ändern Sie dann das 3499910bf9dac5ae3c52d5ede7383485-Tag ; rel-Attribut. Wenn sie gleich sind, ändern Sie die aktuelle Klasse.

Der obige Inhalt dient dazu, Ihnen die Hervorhebung des Navigationsmenüs basierend auf JQuery auf zwei Arten näher zu bringen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Häufige Sicherheitslücken in JavaScript und automatisierte Erkennungstechnologie_Javascript-KenntnisseNächster Artikel：Häufige Sicherheitslücken in JavaScript und automatisierte Erkennungstechnologie_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen