suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript erkennt den Effekt der Änderung des entsprechenden Inhalts unten, nachdem die Maus platziert wurde_Javascript-Kenntnisse

Javascript erkennt den Effekt der Änderung des entsprechenden Inhalts unten, nachdem die Maus platziert wurde_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:46:391092Durchsuche

Dieser Artikel beschreibt das Beispiel von JavaScript, das den Effekt der Änderung des entsprechenden Inhalts unten realisiert, wenn die Maus platziert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein relativ häufiger Menüeffekt im Internet. Wenn die Maus platziert wird, wechselt der entsprechende Inhalt mit Grafik- und Textlayout. Aus technischer Sicht werden JS und CSS kombiniert, um dies zu erreichen. Sie können den JS-Teil des Codes separat extrahieren und als JS-Datei speichern und ihn dann in die Seite einfügen, wodurch der Hauptseitencode einfacher wird. Dieser Effekt wird normalerweise unter IE, Firefox und anderen Browsern getestet.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt: 

<html>
<head>
<title>鼠标放上后下面的内容切换</title>
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.menuA{background:#333;float:left;padding-top:2px;width:100%;}
.menuA li{float:left;}
.menuA li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.menuA .check a {background:#fff;color:#000;}
.menuB{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.menuB ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<body>
<div class="menuA">
<ul>
   <li class="check"><a href="#">国际时事</a></li>
   <li><a href="#">精美壁纸</a></li>
   <li><a href="#">大国关系</a></li>
   <li><a href="#">欧美风情</a></li>
</ul>
</div>
<div class="menuB">
 <ul style="display:block;" class="one">
 <li><a href="#">国际时事</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">精美壁纸</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">大国关系</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">欧美风情</a></li>
 </ul>
</div>
<script>
function $_class(name){
 var elements = document.getElementsByTagName("*");
 for(s=0;s<elements.length;s++){
 if(elements[s].className==name){
  return elements[s];
 }
 }
}
var tabList = $_class("menuA").getElementsByTagName("li")
 tabCon = $_class("menuB").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
 (function(){
 var t = i;
 tabList[t].onmouseover = function(){
  for(o=0;o<tabCon.length;o++){
  tabCon[o].style.display = "none";
  tabList[o].className = "";
  if(t==o){
   this.className = "check";
   tabCon[o].style.display = "block";
  }
  }
 }
 })()
}
</script>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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：Javascript-Methode zum Erlernen des Feuerwerkseffekts im Hintergrund einer Webseite. Javascript-KenntnisseNächster Artikel：Javascript-Methode zum Erlernen des Feuerwerkseffekts im Hintergrund einer Webseite. Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen