이 메뉴 효과는 스크립트와 스타일을 통해 제어되며, 이는 초보자에게 매우 좋은 학습 콘텐츠입니다.
어젯밤 Strictly Come Dancing을 보면서 이 메뉴를 정리하기 위한 작은 코드를 살펴보겠습니다. 알고 있으면 과거를 복습할 수 있고, 모르면 새로운 것을 배울 수 있습니다. 사실 저는 이 프런트 엔드 아이디어를 개선하여 다시 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="서버">
<제목></제목>
<link type="text/css" rel="스타일시트" href="스타일/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>
<본문>
<div id="nav">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0">홈</a>
<a href="surveylist.aspx?menutemp=1">병원 개요</a>
<a href="Culturelist.aspx?menutemp=2">병원 문화</a>
<a href="종양 동적 목록.aspx?menutemp=3">병원 뉴스</a>
<a href="서비스 목록 .aspx?menutemp=4">병원 서비스</a>
<a href="의료 지침.aspx?menutemp=5">의료 지침</a>
<a href="department.aspx?menutemp=6">부서 소개</a>
</div>
</body>
</html>
CSS 부분을 살펴보세요. 이는 선택한 항목을 다른 항목과 구별하는 것입니다.
#master .head .nav a.check{ 배경:url(../images/navbg.png) 1px 1px 반복 없음 색상:#fff;}
다음은 html에 생명을 불어넣고 웹페이지를 움직이게 만드는 js 부분입니다.
다음과 같이 코드 코드를 복사합니다.
$(document).ready(function () {//웹 페이지가 로드된 후 실행되어야 함을 나타냅니다.
var current = $("#masterid").val();//jquery를 통해 id=masterid인 페이지 요소의 값을 가져옵니다. 실제로는 선택한 메뉴를 가져오는 것입니다.
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("check");
$(alist[현재]).removeClass("check");
current = i;//새로 선택한 메뉴 항목 ID를 반환합니다.
}
});
});
$("#nav>a").each(function (i, items) {//페이지가 새 페이지로 이동한 후 페이지 스타일을 처리하여 메뉴 스타일을 올바르게 호출할 수 있도록 하는 작업입니다.
alist[i] = $(항목);
if (i != 현재) {
$(alist[i]).removeClass("check");
}
});
$(alist[현재]).addClass("check");
});
좋아요, 빨리 시도해 보세요.