js 제어 탐색 메뉴 예제 code_javascript 기술

이 메뉴 효과는 스크립트와 스타일을 통해 제어되므로 초보자에게 매우 좋은 학습 콘텐츠입니다.

어젯밤 Strictly Come Dancing을 보면서 이 메뉴를 정리하는 작은 코드를 살펴보겠습니다. 일단 알고 나면 과거를 복습하고 모르더라도 새로운 것을 배울 수 있습니다. 사실 저는 이 프런트 엔드 아이디어를 개선하고 싶습니다.

asp.net 마스터 페이지의 메뉴 부분입니다

HTML 부분:

코드 복사 코드는 다음과 같습니다.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

제목>

<본문>

  " id="masterid" />

홈페이지

병원 개요

  병원 문화

병원 뉴스

병원 서비스

의료 지침

부서 소개

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");

});

알겠습니다. 빠르게 시도해 보시면 됩니다.