Este efeito de menu é controlado por meio de scripts e estilos, o que é um conteúdo de aprendizagem muito bom para iniciantes:
Vamos dar uma olhada neste pequeno código para organizar este menu enquanto assistia Strictly Come Dancing ontem à noite. Se você conhece, pode revisar o passado e aprender coisas novas. Na verdade, eu só quero melhorar essa ideia de front-end para que não precise ser usada novamente pelo Stranger:
Esta é a parte do menu de uma página mestra do asp.net
Parte HTML:
Copie o código do código da seguinte forma:
<%@ 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="servidor">
<título></título>
<link type="text/css" rel="Folha de estilo" href="Estilos/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>
<corpo>
<div id="nav">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">Página inicial</a>
<a href="surveylist.aspx?menutemp=1">Visão geral do hospital</a>
<a href="Culturelist.aspx?menutemp=2">Cultura Hospitalar</a>
<a href="Tumor dynamic list.aspx?menutemp=3">Notícias do hospital</a>
<a href="Lista de serviços .aspx?menutemp=4">Serviços hospitalares</a>
<a href="Diretrizes médicas.aspx?menutemp=5">Diretrizes médicas</a>
<a href="Introduce Department.aspx?menutemp=6">Introdução ao departamento</a>
</div>
</body>
</html>
Dê uma olhada na parte css. Isso serve para distinguir o item selecionado de outros itens:
#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px sem repetição cor:#fff;}
A seguir está a parte js que dá vida ao html e faz a página web se mover:
Copie o código do código da seguinte forma:
$(document).ready(function() {//Indica que deve ser executado após o carregamento da página da web
var current = $("#masterid").val();//Obtém o valor do elemento da página com id=masterid através do jquery, na verdade, é para obter o menu selecionado
var alist = new Array(); //Definir array
if (current == "") {//Se o menu selecionado não for obtido, iremos ignorar isso
corrente = -1;
}
$("#nav>a").each(function (i, items) {//Esta parte é sobre a mudança de estilo quando você atualiza a página depois de clicar em um item de menu, haha, cada um é uma função de passagem, vai percorra a coleção de #nav>a.
alist[i] = $(items);//i começa em 0 e aumenta em 1 até o final da coleção percorrida
$(alist[i]).click(function () {//Registre o evento de clique para alist[i] e o método correspondente será executado quando clicado.
if (i != current) {//Se um item de menu diferente for selecionado, o menu selecionado será adicionado com o estilo apropriado e o estilo anterior será removido.
$(this).addClass("verificar");
$(alist[atual]).removeClass("verificar");
current = i;//Retorna o id do item de menu recém-selecionado
}
});
});
$("#nav>a").each(function (i, items) {//Este é o processamento do estilo da página depois que a página salta para uma nova página, para que o estilo do menu possa ser chamado corretamente.
lista[i] = $(itens);
if (i! = atual) {
$(alist[i]).removeClass("verificar");
}
});
$(alist[atual]).addClass("verificar");
});
Ok, você pode tentar rapidamente.