js 제어 탐색 메뉴 예제 code_javascript 기술
May 16, 2016 pm 05:11 PM이 메뉴 효과는 스크립트와 스타일을 통해 제어되므로 초보자에게 매우 좋은 학습 콘텐츠입니다.
어젯밤 Strictly Come Dancing을 보면서 이 메뉴를 정리하는 작은 코드를 살펴보겠습니다. 일단 알고 나면 과거를 복습하고 모르더라도 새로운 것을 배울 수 있습니다. 사실 저는 이 프런트 엔드 아이디어를 개선하고 싶습니다.
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="server">
제목>
<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>
<본문>
<div class="nav" id="nav">
<input type="hidden" value="<%=Request.QueryString["menutemp"] %>" id="masterid" />
<a href="Default.aspx?menutemp=0" class="check">홈페이지</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="Introduce Department.aspx?menutemp=6">부서 소개</a>
</div>
</body>
</html>
CSS 부분을 보면 선택한 항목이 다른 항목과 구별됩니다.
#master .head .nav a.check{ background:url(../images/navbg.png) 1px 1px no-repeat; #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) {//메뉴 항목을 클릭한 후 페이지를 새로 고칠 때 스타일이 변경되는 부분입니다. 하하, 각각은 A 순회입니다. #nav>
컬렉션을 순회하는 함수입니다.alist[i] = $(items);//i는 0부터 순회 컬렉션의 끝까지이며 1씩 증가합니다.
$(alist[i]).click(function () {//alist[i]에 대한 클릭 이벤트를 등록하고, 클릭 시 해당 메소드가 실행됩니다.
If (i != current) {//다른 메뉴 항목을 선택하면 선택한 메뉴에 해당 스타일이 추가되고 이전 스타일은 제거됩니다.
$(this).addClass("check");
$(alist[현재]).removeClass("check");
> 새로 선택한 메뉴 항목 ID
}
});
});
$("#nav>a").each(function (i, items) {//페이지가 새 페이지로 이동한 후 페이지 스타일을 처리하여 메뉴 스타일을 올바르게 호출할 수 있도록 하는 작업입니다. .
alist[i] = $(항목);
if (i != 현재) {
$(alist[i]).removeClass("check");
}
});
$(alist[현재]).addClass("check");
});
알겠습니다. 빠르게 시도해 보시면 됩니다.
인기 기사
인기 기사
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7303
9
1622
14
1342
46
1259
25
1207
29
JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법
Nov 21, 2023 am 10:00 AM
JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법
주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.
Dec 17, 2023 pm 06:55 PM
주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.
JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법
Nov 21, 2023 am 10:53 AM
JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법
JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법
Nov 21, 2023 am 11:11 AM
JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법
JS 및 Baidu Maps를 사용하여 지도 히트맵 기능을 구현하는 방법
Nov 21, 2023 am 09:33 AM
JS 및 Baidu Maps를 사용하여 지도 히트맵 기능을 구현하는 방법
