Dieser Menüeffekt wird durch Skripte und Stile gesteuert, was für Anfänger ein sehr guter Lerninhalt ist:
Schauen wir uns diesen kleinen Code an, um dieses Menü zu sortieren, während Sie gestern Abend Strictly Come Dancing schauen. Wenn Sie es wissen, können Sie die Vergangenheit Revue passieren lassen und neue Dinge lernen. Tatsächlich möchte ich diese Front-End-Idee nur verbessern, damit sie nicht noch einmal verwendet werden muss:
Dies ist der Menüteil einer asp.net-Masterseite
HTML-Teil:
Kopieren Sie den Codecode wie folgt:
<%@ 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="server">
<title></title>
<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>
</head>
<Körper>
<div id="nav">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">Startseite</a>
<a href="surveylist.aspx?menutemp=1">Krankenhausübersicht</a>
<a href="Culturelist.aspx?menutemp=2">Krankenhauskultur</a>
<a href="Tumordynamic list.aspx?menutemp=3">Krankenhausnachrichten</a>
<a href="Services list .aspx?menutemp=4">Krankenhausdienste</a>
<a href="Medizinische Richtlinien.aspx?menutemp=5">Medizinische Richtlinien</a>
<a href="Introduce Department.aspx?menutemp=6">Abteilungsvorstellung</a>
</div>
</body>
</html>
Schauen Sie sich den CSS-Teil an. Dies dient dazu, das ausgewählte Element von anderen Elementen zu unterscheiden:
#master .head .nav a.check{ Hintergrund:url(../images/navbg.png) 1px 1px no-repeat;}
Das Folgende ist der js-Teil, der HTML zum Leben erweckt und die Webseite bewegt:
Kopieren Sie den Codecode wie folgt:
$(document).ready(function () {//Gibt an, dass es ausgeführt werden soll, nachdem die Webseite geladen wurde
var current = $("#masterid").val();// Rufen Sie den Wert des Seitenelements mit id=masterid über jquery ab. Tatsächlich dient es dazu, das ausgewählte Menü abzurufen
var alist = new Array(); //Array definieren
if (current == "") {//Wenn das ausgewählte Menü nicht erhalten wird, ignorieren wir dies
aktuell = -1;
}
$("#nav>a").each(function (i, items) {//In diesem Teil geht es um die Stiländerung, wenn Sie die Seite aktualisieren, nachdem Sie auf einen Menüpunkt geklickt haben. Haha, jeder ist eine Durchlauffunktion Durchqueren Sie die Sammlung von #nav>a.
alist[i] = $(items);//i beginnt bei 0 und erhöht sich um 1 bis zum Ende der durchlaufenen Sammlung
$(alist[i]).click(function () {// Registrieren Sie das Klickereignis für alist[i], und die entsprechende Methode wird beim Klicken ausgeführt.
if (i != current) {//Wenn ein anderes Menüelement ausgewählt wird, wird das ausgewählte Menü mit dem entsprechenden Stil hinzugefügt und der vorherige Stil wird entfernt.
$(this).addClass("check");
$(alist[current]).removeClass("check");
current = i;//Gibt die neu ausgewählte Menüpunkt-ID zurück
}
});
});
$("#nav>a").each(function (i, items) {//Dies ist die Verarbeitung des Seitenstils, nachdem die Seite zu einer neuen Seite gesprungen ist, damit der Menüstil korrekt aufgerufen werden kann.
alist[i] = $(items);
if (i != aktuell) {
$(alist[i]).removeClass("check");
}
});
$(alist[current]).addClass("check");
});
Okay, du kannst es schnell versuchen.