Javascript réalise l'effet de modifier le contenu correspondant ci-dessous une fois la souris placée

Javascript réalise l'effet de modifier le contenu correspondant ci-dessous une fois la souris placée_javascript skills

WBOY

Libérer： 2016-05-16 15:46:39

original

1102 Les gens l'ont consulté

Cet article décrit l'exemple de JavaScript réalisant l'effet de modification du contenu correspondant ci-dessous lorsque la souris est placée. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un effet de menu relativement courant sur Internet. Lorsque la souris est placée, le contenu correspondant change, avec une disposition graphique et textuelle. En termes de technologie, JS et CSS sont combinés pour y parvenir. Vous pouvez extraire la partie JS du code séparément et l'enregistrer sous forme de fichier JS, puis l'introduire dans la page, ce qui simplifie le code de la page principale. Cet effet est testé normalement sous IE, Firefox et d'autres navigateurs.

L'effet de l'opération est comme indiqué ci-dessous :

Le code spécifique est le suivant :

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

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.