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

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

WBOYoriginal: 2016-05-16 15:46:391077parcourir

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode Javascript pour acquérir des compétences effect_javascript en matière de feux d'artifice en arrière-plan de page WebArticle suivant：Méthode Javascript pour acquérir des compétences effect_javascript en matière de feux d'artifice en arrière-plan de page Web

Articles Liés

Voir plus