Heim > Artikel > Web-Frontend > Wie erzielt JavaScript den Effekt, dass das aktuelle Menü in der Navigationsleiste hervorgehoben wird, wenn es ausgewählt wird?

Wie erzielt JavaScript den Effekt, dass das aktuelle Menü in der Navigationsleiste hervorgehoben wird, wenn es ausgewählt wird?

黄舟Original: 2017-07-25 09:36:511572Durchsuche

Dieser Artikel stellt hauptsächlich die JS-Implementierung des hervorgehobenen Navigationsleisteneffekts nach der Auswahl des aktuellen Menüs vor. Er beinhaltet JavaScript-Traversal- und Stil-Dynamikoperationstechniken für Seitenelemente, die einen bestimmten Referenzwert haben.

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung des hervorgehobenen Navigationsleisteneffekts, nachdem das aktuelle Menü ausgewählt wurde. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Hier ist eine Demonstration, dass das Menü hervorgehoben wird, nachdem es ausgewählt wurde. Das heißt, ohne den CSS-Code des Menüs zu ändern, wird JavaScript verwendet, um den Hintergrund des Menüs zu steuern Wenn auf das Menüelement geklickt wird, erhält es eine eindeutige Hintergrundfarbe oder ein Hintergrundbild, das den Benutzer klar zu der Website-Spalte führt, die er durchsucht. Dieses Menü erfordert keine Hinzufügung einer dynamischen Sprache, es ist einfach. bequem und effektiv.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code 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>
<title>选中当前菜单后高亮</title>
<style type="text/css">
<!--
.nav {
  MARGIN: 1px 0; 
  WIDTH: 100%; 
  FONT-FAMILY: verdana; 
  HEIGHT: 21px; 
  BACKGROUND-COLOR: #970B0B;
  font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
}
.nav UL {
  PADDING: 0px; 
  DISPLAY: block; 
  MARGIN: 0px; 
  LIST-STYLE-TYPE: none; 
  HEIGHT: 21px; 
  BACKGROUND-COLOR: #970B0B;
  COLOR: #ffffff; 
}
.nav LI {
  BORDER-RIGHT: #ffffff 1px solid; 
  DISPLAY: block; 
  FLOAT: left; 
  HEIGHT: 21px;
  font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
}
.nav LI A {
  PADDING:1px 15px 0; 
  DISPLAY: block; 
  FONT-WEIGHT: none; 
  COLOR: #ffffff; 
  LINE-HEIGHT: 20px; 
  TEXT-DECORATION: none;
}
.nav LI A:hover {
  COLOR:#562505; 
  BACKGROUND-COLOR: #f4f524; 
  TEXT-DECORATION: none;
}
.current{
 color:#ffffff;
 background:#D42524;
}
.nav li#date{
 color:#ffffff;
 PADDING:2px 15px 0; 
}
-->
</style>
<script language="javascript" type="text/javascript">
var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;};
Array.prototype.each=function(func){
for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};
};
document .getElementsByClassName=function(cn){
var hasClass=function(w,Name){
var hasClass = false;
w.className.split(&#39; &#39;).each(function(s){
if (s == Name) hasClass = true;
});
return hasClass;
}; 
var elems =document.getElementsByTagName("*")||document.all;
   var elemList = [];
   $c(elems).each(function(e){
if(hasClass(e,cn)){elemList.push(e);}
   })
  return $c(elemList);
};
function change_bg(obj){
var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for(var i=0;i<a.length;i++){a[i].className="";}
obj.className="current";
}
</script>
</head>
<body>
<p class="nav">
 <UL>
 <LI><A href="#" onclick="change_bg(this)">脚本首页</A></LI>
 <LI><A href="#" onclick="change_bg(this)">网页特效</A> </LI>
 <LI><a href="#" class="current" onclick="change_bg(this)">精品脚本</a> </LI>
 <LI><A href="#" onclick="change_bg(this)">ASP代码</A> </LI>
 <LI><A href="#" onclick="change_bg(this)">PHP代码</A> </LI>
 <LI><A href="#" onclick="change_bg(this)">JSP代码</A> </LI>
 <LI><A href="#" onclick="change_bg(this)">脚本资源</A> </LI>
 <LI><A href="#" onclick="change_bg(this)">软件下载</A> </LI>
 </UL>
</p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie erzielt JavaScript den Effekt, dass das aktuelle Menü in der Navigationsleiste hervorgehoben wird, wenn es ausgewählt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Ausführliche Erläuterung des Grafikcodes zur Verwendung von JavaScript, um den Hover-Effekt der Navigationsleiste zu erzielenNächster Artikel：Ausführliche Erläuterung des Grafikcodes zur Verwendung von JavaScript, um den Hover-Effekt der Navigationsleiste zu erzielen

In Verbindung stehende Artikel

Mehr sehen