Этот эффект меню контролируется с помощью скриптов и стилей, что является очень хорошим учебным материалом для новичков:
Давайте взглянем на этот небольшой код для сортировки этого меню во время просмотра «Танцев со звездами» вчера вечером. Если вы это знаете, вы можете просмотреть прошлое и узнать что-то новое. Если вы этого не знаете, вы можете извлечь из него уроки. На самом деле, я просто хочу улучшить эту идею внешнего интерфейса, чтобы ее больше не нужно было использовать Stranger:
Это часть меню главной страницы asp.net.
HTML-часть:
Скопируйте код кода следующим образом:
<%@ 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="сервер">
<title></title>
<link type="text/css" rel="Таблица стилей" 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>
</голова>
<тело>
<div id="nav">
<input type="hidden" value="<%=Request.QueryString["menutep"] %>" id="masterid" />
<a href="Default.aspx?menutep=0">Главная</a>
<a href="surveylist.aspx?menutep=1">Обзор больницы</a>
<a href="Culturelist.aspx?menutep=2">Больничная культура</a>
<a href="Динамический список опухолей.aspx?menutep=3">Новости больницы</a>
<a href="Список услуг .aspx?menutep=4">Больничные услуги</a>
<a href="Медицинские рекомендации.aspx?menutep=5">Медицинские рекомендации</a>
<a href="Introduce Department.aspx?menutep=6">Введение в отдел</a>
</div>
</тело>
</html>
Взгляните на часть CSS. Это позволяет отличить выбранный элемент от других элементов:
#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px без повтора; цвет:#fff;}
Ниже представлена часть js, которая оживляет HTML и заставляет веб-страницу двигаться:
Скопируйте код кода следующим образом:
$(document).ready(function () {//Указывает, что его следует запустить после загрузки веб-страницы.
var current = $("#masterid").val();//Получаем значение элемента страницы с id=masterid через jquery, по сути, это получение выбранного меню
var alist = new Array(); //Определить массив
if (current == "") {//Если выбранное меню не получено, мы проигнорируем это
ток = -1;
}
$("#nav>a").each(function (i, items) {//Эта часть посвящена изменению стиля при обновлении страницы после нажатия на пункт меню, ха-ха, каждый из них является функцией обхода, будет обойти коллекцию #nav>a.
alist[i] = $(items);//i начинается с 0 и увеличивается на 1 до конца пройденной коллекции
$(alist[i]).click(function () {//Зарегистрируйте событие клика для alist[i], и соответствующий метод будет выполняться при нажатии.
if (i != current) {//Если выбран другой пункт меню, выбранное меню будет добавлено с соответствующим стилем, а предыдущий стиль будет удален.
$(this).addClass("проверить");
$(алист[текущий]).removeClass("проверить");
current = i;//Вернем идентификатор вновь выбранного пункта меню
}
});
});
$("#nav>a").each(function (i, items) {//Это обработка стиля страницы после перехода на новую страницу, чтобы стиль меню можно было вызвать правильно.
алист[i] = $(предметы);
если (я != текущий) {
$(алист[i]).removeClass("проверка");
}
});
$(алист[текущий]).addClass("проверка");
});
Хорошо, можешь быстро попробовать.