recherche

Maison >interface Web >js tutoriel >JS implémente l'effet de barre de navigation en surbrillance après avoir sélectionné le menu actuel

JS implémente l'effet de barre de navigation en surbrillance après avoir sélectionné le menu actuel

PHPz
PHPzavant
2016-05-16 15:36:291891parcourir

Cet article présente principalement l'implémentation JS de l'effet de barre de navigation en surbrillance après la sélection du menu actuel. Il implique des techniques de traversée JavaScript et d'opération dynamique de style pour les éléments de page. Il a une certaine valeur de référence. Les amis qui en ont besoin peuvent s'y référer. détails. Comme suit :

Voici une démonstration selon laquelle une fois le menu actuel sélectionné, le menu est mis en surbrillance. C'est-à-dire que JavaScript est utilisé pour contrôler l'arrière-plan du menu sans changer le code CSS du menu. Si l'on clique sur l'élément de menu, une couleur ou une image d'arrière-plan distincte lui sera attribuée, qui pourra clairement guider l'utilisateur vers la colonne du site Web qu'il parcourt. Ce menu ne nécessite pas l'ajout d'un langage dynamique, il est simple, pratique et. efficace.

Une capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démonstration en ligne est la suivante :

http : //demo.jb51.net/ js/2015/js-cho-nav-gl-show-menu-demo/

Le code spécifique est le suivant : 

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

Ce qui précède représente l'intégralité du contenu de ce chapitre, plus connexe. Pour les didacticiels, veuillez visiter le Tutoriel vidéo JavaScript !

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：JS implémente un effet de couche contextuelle dont la taille peut être personnalisée et fermée par un double-clic sur les compétences_javascriptArticle suivant：JS implémente un effet de couche contextuelle dont la taille peut être personnalisée et fermée par un double-clic sur les compétences_javascript

Articles Liés

Voir plus