Wie erzielt JavaScript den Effekt, dass das aktuelle Menü in der Navigationsleiste hervorgehoben wird, wenn es ausgewählt wird?-js-Tutorial-php.cn

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

黄舟

Freigeben： 2017-07-25 09:36:51

Original

1602 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!