JavaScript 기사에서 동적 메뉴를 작성하십시오

여기서는 DHTML 드롭 다운/풀다운 메뉴에 대해 이야기하지 않습니다. 여기서는 JavaScript를 사용하는 간단한 탐색 메뉴에 대해 이야기하고 있습니다. 활성 페이지를 식별하고 따라서 다른 링크와 다르게 연결되는 것을 표시하므로 사용자가 쉽게 탐색 할 수 있습니다. 여기에서 내비게이션 메뉴의 모든 페이지에 사용될 단일 .js 파일을 사용합니다. 따라서 모든 페이지를 업데이트 할 필요는 없습니다. 하나의 JavaScript 라이브러리 파일 (.js 파일) 만 업데이트해야합니다. 예를 들어이 3 가지 탐색 링크를 고려하십시오. 링크 1이 활성화되었습니다. 링크 2가 활성화되었습니다. 링크 3이 활성화되었습니다. 보시다시피, 이것은 어떤 링크가 활성화되어 있는지에 따라 다른 페이지에 내비게이션 메뉴가 어떻게 나타나는지에 대한 샷입니다. 이 메뉴는 단일 JavaScript 파일로 생성됩니다. 메뉴에 대한 클래스 (.links)를 정의하고 .links : active에 대해 다른 속성을 할당하여 계단식 스타일 시트 (CSS) 만 사용하여 이러한 메뉴를 만들 수 있습니다. 따라서 CSS 파일을 사용하여 메뉴를 만들 수 있습니다. 이것은 완벽하지만 여기에서 JavaScript를 사용하는 데 이점이 있습니다. 위의 샷에서 볼 수 있듯이 활성 링크에는 결국 "" ""문자가 있습니다. 이것은 활성 링크에 대해서만 생성되므로 동적으로 생성됩니다. JavaScript를 사용하면 링크를 실제로 활성화시키는 모든 문자 나 상징적 인 이미지를 사용할 수 있습니다.

구현

이러한 유형의 메뉴를 구현하려면 우선 링크의 스타일을 정의하기 위해 CSS 파일 인 CSS 파일입니다. 다음은 JavaScript 파일 Nav.js가 온다. Nav.js 파일에서 우선 3 개의 배열을 선언합니다. "링크"라는 하나의 배열에는 링크 이름이 포함됩니다. 다른 배열을 "links_text"라고하며 링크의 텍스트 (예 : Link 1)로 구성됩니다. 전자는이 파일과 비교하는 데 사용될 것입니다. 링크 파일의 제목을 사용하여 링크 배열의 다양한 요소를 확장자를 제외하십시오 (예 : 첫 번째 링크가 index.htm, 이름 IT 인덱스로 이동하는 경우). "Links_URL"이라는 세 번째 배열에는 링크가 사용자를 데려 오는 URL이 포함되어 있습니다. 이제 우리가 원하는 것은 배열 링크의 각 요소를 확장자없이 현재 페이지 파일 이름과 비교하는 것입니다. 그런 다음 링크에 스타일과 링크 텍스트에 추가하기로 결정한 추가 텍스트 또는 이미지를 활성 페이지를 강조 표시하기로 결정했습니다. LOC를 비교 문자열로 둡니다. loc는 다음과 같이 찾을 수 있습니다. var loc = string (this.location); loc = loc.split ( "/"); loc = loc [loc.length-1] .split ( "."); loc = loc [loc.length-2]; 따라서 현재 페이지가 https://www.sitepoint.com/index.htm 인 경우 loc가 색인이됩니다. 이제 배열 링크의 각 요소와 이것을 비교합니다. 이 배열과 loc의 첫 번째 요소는 동일 하므로이 링크를 다음 방식으로 씁니다. document.write ( ' href = " 'links_url [i]'"> 'links_text [i]' » '); 링크 배열의 다른 요소는 LOC와 같지 않으므로 다음과 같이 작성됩니다. docum links_url [i] '' "> 'links_text [i] '); 그리고 그것은 당신의 역동적 인 메뉴입니다! 모든 페이지에 배치해야 할 코드는 다음과 같습니다. 페이지에 내비게이션 메뉴가 필요한 곳에이 코드를 배치하십시오. 필요한 다른 코드는 이며 HTML 페이지의 섹션에 배치해야합니다. 따라서 1 nav.js를 나열하는 것은 다음과 같습니다. 링크 세부 사항 * / var links = new Array ( "link1", "link2", "link3"); var links_text = new Array ( "Link 1", "Link 2", "Link 3"); var links_url = new Array ( "link1.htm", "link2.htm", "link3.htm"); / * 위치를 해결 */ var loc = string (this.location); loc = loc.split ( "/"); loc = loc [loc.length-1] .split ( "."); loc = loc [loc.length-2]; / * 메뉴 함수 생성 */ 함수 dyn_menu_gen () {for (var i = 0; i 'links_text [i]' '); } document.write ( ' '); }} / * 메뉴 생성 * / dyn_menu_gen (); Listing 2, Links_style.css는 다음과 같습니다. .Explorer {font-family : Verdana, Arial, Helvetica; 글꼴 크기 : 8pt; 글꼴 중량 : 정상; 텍스트 결정 : 없음; 색상 :#000000; 배경 :#b5d0ff; 커서 : 손; 너비 : 150px; 높이 : 30px; 국경 : 1 SOLID #A6C0ED} .Explorer_over {font-family : Verdana, Arial, Helvetica; 글꼴 크기 : 8pt; 글꼴 중량 : 정상; 텍스트 결정 : 없음; 색상 :#000000; 배경 :#A7C0EB; 커서 : 손; 너비 : 150px; 높이 : 30px; 경계 오른쪽 : 1 Solid #5C6980; 국경-바닥 : 1 Solid #5C6980; 왼쪽 경계 : 1 Solid #B8D3ff; 테두리 탑 : 1 SOLID #B8D3FF} .Explorer_down {font-family : Verdana, Arial, Helvetica; 글꼴 크기 : 8pt; 글꼴 중량 : 정상; 텍스트 결정 : 없음; 색상 :#000000; 배경 :#A7C0EB; 커서 : 손; 너비 : 150px; 높이 : 30px; 왼쪽 경계 : 1 Solid #5C6980; 테두리 탑 : 1 Solid #5C6980; 경계 오른쪽 : 1 Solid #B8D3ff; Border-Bottom : 1 Solid #B8D3ff} .Explorer_Active {Font-Family : Verdana, Arial, Helvetica; 글꼴 크기 : 8pt; 글꼴 중량 : 정상; 텍스트 결정 : 없음; 색상 :#000000; 배경 : #ffffff; 커서 : 손; 너비 : 150px; 높이 : 30px} .menu {font-family : Verdana, Arial, Helvetica; 글꼴 크기 : 8pt; 글꼴 중량 : 정상; 텍스트 결정 : 없음; 색상 :#000000}이 스크립트가 웹 페이지의 동적 JavaScript 탐색의 생성을 단순화하기를 바랍니다!

JavaScript의 동적 메뉴에 대해 자주 묻는 질문

JavaScript의 동적 메뉴에 하위 메뉴를 추가하려면 어떻게해야합니까?

JavaScript의 동적 메뉴에 하위 메뉴를 추가하려면 새 메뉴 항목을 작성한 다음 부모 메뉴 항목에 어린이를 추가하는 것이 포함됩니다. AppendChild () 메소드를 사용하여이를 달성 할 수 있습니다. 간단한 예는 다음과 같습니다.

var parentmenuitem = document.getElementById ( 'parentmenuitem');
var submenuitem = document.createElement ( 'li');
submenuitem.innerhtml = 'submenu 항목';
Parentmenuitem.appendChild (submenuitem);
이 예에서 'ParentMenuitem'은 하위 메뉴를 추가하려는 메뉴 항목의 ID입니다. 'subenuitem'은 추가하는 새로운 하위 메뉴 항목입니다.

JavaScript의 동적 메뉴에서 메뉴 항목을 제거하려면 어떻게해야합니까?

JavaScript의 동적 메뉴에서 메뉴 항목을 제거하려면 removeChild () 메소드를 사용할 수 있습니다. 이 메소드는 지정된 요소의 지정된 하위 노드를 제거합니다. 예는 다음과 같습니다.

var menuitem = document.getElementById ( 'menuitem');
menuitem.parentnode.removechild (menuitem);
이 예에서 'menuitem'은 제거하려는 메뉴 항목의 ID입니다.

JavaScript의 동적 메뉴에서 메뉴 항목의 텍스트를 어떻게 변경할 수 있습니까?

javaScript의 동적 메뉴에서 메뉴 항목의 텍스트 변경은 InnerHTML 속성을 사용하여 수행 할 수 있습니다. 예는 다음과 같습니다.

var menuitem = document.getElementById ( 'menuitem');
menuitem.innerhtml = '새 메뉴 항목 텍스트';
이 예에서 'menuitem'은 텍스트를 변경하려는 메뉴 항목의 ID이며 '새 메뉴 항목 텍스트'는 설정하려는 새 텍스트입니다.

JavaScript의 동적 메뉴에서 메뉴 항목에 이벤트 리스너를 추가하려면 어떻게해야합니까?

addeventListener () 메소드를 사용하여 JavaScript의 동적 메뉴에서 메뉴 항목에 이벤트 리스너 추가를 수행 할 수 있습니다. 이 메소드는 이벤트 핸들러를 지정된 요소에 첨부합니다. 예는 다음과 같습니다.

var menuitem = document.getElementById ( 'menuitem');
menuitem.addeventListener ( 'click', function () {
Alert ( '메뉴 항목 클릭!');
});
이 예에서 'menuitem'은 이벤트 리스너를 추가하려는 메뉴 항목의 ID입니다. 이벤트 리스너는 메뉴 항목을 클릭하면 경고가 표시됩니다.

JavaScript의 동적 메뉴에서 메뉴 항목을 어떻게 스타일링 할 수 있습니까?

JavaScript의 동적 메뉴의 메뉴 항목 스타일은 스타일 속성을 사용하여 수행 할 수 있습니다. 이 속성은 요소의 스타일 속성을 설정하거나 반환합니다. 예는 다음과 같습니다.

var menuitem = document.getElementById ( 'menuitem');
menuitem.style.color = '빨간색';
menuitem.style.fontsize = '20px';
이 예에서 'menuitem'은 스타일을 유지하려는 메뉴 항목의 ID입니다. 스타일 속성은 메뉴 항목의 색상과 글꼴 크기를 변경하는 데 사용됩니다.

배열을 사용하여 JavaScript에서 동적 메뉴를 어떻게 만들려면?

배열을 사용하여 JavaScript에서 동적 메뉴를 작성하려면 배열을 반복하고 배열의 각 요소에 대한 새 메뉴 항목을 작성하는 것이 포함됩니다. 예는 다음과 같습니다.

var menuitems = [ 'home', 'about', 'contact'];
var menu = document.getElementById ( '메뉴');

for (var i = 0; i var menuitem = document.createElement ( 'li');
menuitem.innerhtml = menuitems [i];
메뉴. AppendChild (menuitem);
}
이 예에서 'menuitems'는 다양한 메뉴 항목 텍스트이며 '메뉴'는 메뉴 항목을 추가하려는 메뉴의 ID입니다.

JSON 데이터를 사용하여 JavaScript에서 동적 메뉴를 어떻게 만들려면?

JSON 데이터를 사용하여 JavaScript에서 동적 메뉴를 작성하려면 JSON 데이터를 구문 분석하고 구문 분석 데이터의 각 객체에 대한 새 메뉴 항목을 작성하는 것이 포함됩니다. 예는 다음과 같습니다.

var jsondata = '[{ "text": "home"}, { "text": "about"}, { "text": "contact"}]';
var menuitems = json.parse (jsondata);
var menu = document.getElementById ( '메뉴');

for (var i = 0; i var menuitem = document.createElement ( 'li');
menuitem.innerhtml = menuitems [i] .text;
메뉴. AppendChild (menuitem);
}
이 예에서 'JSONDATA'는 메뉴 항목 객체의 JSON 문자열이며 '메뉴'는 메뉴 항목을 추가하려는 메뉴의 ID입니다.

서버의 데이터를 사용하여 JavaScript에서 동적 메뉴를 어떻게 만들려면?

서버에서 데이터를 사용하여 JavaScript에서 동적 메뉴를 작성하려면 데이터를 가져 오기 위해 서버에 AJAX 요청을 작성한 다음 서버에서 반환 한 각 데이터에 대한 새 메뉴 항목을 작성하는 것이 포함됩니다. 다음은 Fetch API를 사용하는 예입니다.

Fetch ( 'https://example.com/menuitems')
.Then (응답 => response.json ())
. 그런데 (data => {
var menu = document.getElementById ( '메뉴');

for (var i = 0; i var menuitem = document.createElement ( 'li');
menuitem.innerhtml = data [i] .text;
메뉴. AppendChild (menuitem);
}
});
이 예에서 'https://example.com/menuitems'는 메뉴 항목 데이터를 반환하는 서버 엔드 포인트의 URL입니다.

JavaScript에서 동적 드롭 다운 메뉴를 어떻게 만들 수 있습니까?

JavaScript에서 동적 드롭 다운 메뉴를 작성하려면 새로운 선택 요소를 작성하고 각 메뉴 항목에 대해 옵션 요소를 추가해야합니다. 예는 다음과 같습니다.

var menuitems = [ 'home', 'about', 'contact'];
var dropdownmenu = document.createElement ( 'select');

for (var i = 0; i var 옵션 = document.createelement ( '옵션');
옵션 .value = menuitems [i];
옵션 .text = menuitems [i];
DropdownMenu.appendChild (옵션);
}

Document.body.appendChild (DropdownMenu);
이 예에서 'menuitems'는 다양한 메뉴 항목 텍스트입니다.

JavaScript에서 동적 컨텍스트 메뉴를 어떻게 만들 수 있습니까?

JavaScript에서 동적 컨텍스트 메뉴를 작성하려면 새 메뉴 요소를 작성하고 메뉴 항목을 추가 한 다음 오른쪽 마우스 버튼을 클릭 할 때 마우스 위치에 메뉴를 표시하는 것이 포함됩니다. 예는 다음과 같습니다.

var menuitems = [ 'cut', 'copy', 'paste'];
var contextMenu = document.createElement ( 'ul');
contextmenu.style.display = 'none';
contextmenu.style.position = '절대';

for (var i = 0; i var menuitem = document.createElement ( 'li');
menuitem.innerhtml = menuitems [i];
ContextMenu. AppendChild (menuitem);
}

document.body.appendChild (ContextMenu);

document.addeventListener ( 'ContextMenu', function (e) {
e.preventDefault ();
contextmenu.style.left = e.pagex 'px';
contextmenu.style.top = e.pagey 'px';
contextmenu.style.display = 'block';
});

document.addeventListener ( 'click', function () {
contextmenu.style.display = 'none';
});
이 예에서 'menuitems'는 컨텍스트 메뉴 항목 텍스트 배열입니다.

위 내용은 JavaScript 기사에서 동적 메뉴를 작성하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!