Este efecto de menú se controla mediante scripts y estilos, lo cual es un muy buen contenido de aprendizaje para principiantes:
Echemos un vistazo a este pequeño código para ordenar este menú mientras miramos Strictly Come Dancing anoche. Si lo sabes, puedes revisar el pasado y aprender cosas nuevas. De hecho, solo quiero mejorar esta idea de front-end para que no vuelva a ser Stranger:
Esta es la parte del menú de una página maestra de asp.net
Parte HTML:
Copie el código de código de la siguiente manera:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Hereda="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="servidor">
<título></título>
<enlace tipo="text/css" rel="Hoja de estilo" href="Estilos/master.css" />
<script src="Scripts/jquery-1.4.1.min.js" tipo="text/javascript"></script>
<script src="Scripts/nav.js" tipo="texto/javascript"></script>
</cabeza>
<cuerpo>
<div id="navegación">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">Inicio</a>
<a href="surveylist.aspx?menutemp=1">Descripción general del hospital</a>
<a href="Culturelist.aspx?menutemp=2">Cultura hospitalaria</a>
<a href="List dinámico de tumores.aspx?menutemp=3">Noticias del hospital</a>
<a href="Lista de servicios .aspx?menutemp=4">Servicios hospitalarios</a>
<a href="Pautas médicas.aspx?menutemp=5">Pautas médicas</a>
<a href="Introducir departamento.aspx?menutemp=6">Introducción al departamento</a>
</div>
</cuerpo>
</html>
Eche un vistazo a la parte CSS. Esto es para distinguir el elemento seleccionado de otros elementos:
#master .head .nav a.check{ fondo:url(../images/navbg.png) 1px 1px sin repetición color:#fff;}
La siguiente es la parte js que le da vida al html y hace que la página web se mueva:
Copie el código de código de la siguiente manera:
$(document).ready(function () {//Indica que debe ejecutarse después de cargar la página web
var current = $("#masterid").val();//Obtener el valor del elemento de la página con id=masterid a través de jquery, de hecho, es para obtener el menú seleccionado
var alist = new Array(); //Definir matriz
if (current == "") {//Si no se obtiene el menú seleccionado, lo ignoraremos
actual = -1;
}
$("#nav>a").each(function (i, items) {// Esta parte trata sobre el cambio de estilo cuando actualizas la página después de hacer clic en un elemento del menú. Jaja, cada una es una función transversal. atravesar la colección de #nav>a.
alist[i] = $(items);//i comienza desde 0 y aumenta en 1 hasta el final de la colección atravesada
$(alist[i]).click(function () {// Registre el evento de clic para alist[i] y se ejecutará el método correspondiente cuando se haga clic.
if (i != current) {//Si se selecciona un elemento de menú diferente, el menú seleccionado se agregará con el estilo apropiado y se eliminará el estilo anterior.
$(this).addClass("verificar");
$(alista[actual]).removeClass("verificar");
current = i;//Devuelve la identificación del elemento de menú recién seleccionado
}
});
});
$("#nav>a").each(function (i, items) {// Este es el procesamiento del estilo de la página después de que la página salta a una nueva página, para que el estilo del menú se pueda llamar correctamente.
alista[i] = $(elementos);
si (yo! = actual) {
$(alista[i]).removeClass("verificar");
}
});
$(alista[actual]).addClass("verificar");
});
Bien, puedes intentarlo rápidamente.