Cet effet de menu est contrôlé via des scripts et des styles, ce qui constitue un très bon contenu d'apprentissage pour les novices :
Jetons un coup d'œil à ce petit code pour trier ce menu en regardant Strictly Come Dancing hier soir. Si vous le savez, vous pouvez revoir le passé et apprendre de nouvelles choses. Si vous ne le savez pas, vous pouvez en tirer des leçons. En fait, je veux juste améliorer cette idée frontale afin qu'elle n'ait plus besoin d'être utilisée par Stranger :
Ceci est la partie menu d'une page maître asp.net
Partie HTML :
Copiez le code comme suit :
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="serveur">
<titre></titre>
<link type="text/css" rel="Stylesheet" href="Styles/master.css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/nav.js" type="text/javascript"></script>
</tête>
<corps>
<div id="nav">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">Accueil</a>
<a href="surveylist.aspx?menutemp=1">Présentation de l'hôpital</a>
<a href="Culturelist.aspx?menutemp=2">Culture hospitalière</a>
<a href="Tumor Dynamic list.aspx?menutemp=3">Actualités de l'hôpital</a>
<a href="Liste des services .aspx?menutemp=4">Services hospitaliers</a>
<a href="Medical guidance.aspx?menutemp=5">Directives médicales</a>
<a href="Présenter le département.aspx?menutemp=6">Présentation du département</a>
</div>
</corps>
</html>
Jetez un œil à la partie CSS. Ceci permet de distinguer l'élément sélectionné des autres éléments :
#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px no-repeat; couleur:#fff;}
Voici la partie js qui donne vie au HTML et fait bouger la page Web :
Copiez le code comme suit :
$(document).ready(function () {//Indique qu'il doit être exécuté après le chargement de la page Web
var current = $("#masterid").val();//Obtenir la valeur de l'élément de page avec id=masterid via jquery, en fait, il s'agit d'obtenir le menu sélectionné
var alist = new Array(); //Définir le tableau
if (current == "") {//Si le menu sélectionné n'est pas obtenu, nous l'ignorerons
courant = -1 ;
}
$("#nav>a").each(function (i, items) {//Cette partie concerne le changement de style lorsque vous actualisez la page après avoir cliqué sur un élément de menu, haha, chacun est une fonction de traversée, sera parcourir la collection de #nav>a.
alist[i] = $(items);//i commence à partir de 0 et augmente de 1 jusqu'à la fin de la collection parcourue
$(alist[i]).click(function () {//Enregistrez l'événement click pour alist[i], et la méthode correspondante sera exécutée lorsque vous cliquerez dessus.
if (i != current) {//Si un élément de menu différent est sélectionné, le menu sélectionné sera ajouté avec le style approprié et le style précédent sera supprimé.
$(this).addClass("check");
$(alist[current]).removeClass("check");
current = i;//Renvoie l'identifiant de l'élément de menu nouvellement sélectionné
}
});
});
$("#nav>a").each(function (i, items) {//Il s'agit du traitement du style de page après que la page passe à une nouvelle page, afin que le style de menu puisse être appelé correctement.
alist[i] = $(articles);
si (i != courant) {
$(alist[i]).removeClass("check");
}
});
$(alist[current]).addClass("check");
});
D'accord, vous pouvez l'essayer rapidement.