자바스크립트로 탐색 메뉴를 구현하는 방법-프런트엔드 Q&A-php.cn

자바스크립트로 탐색 메뉴를 구현하는 방법

PHPz

풀어 주다： 2023-04-06 11:01:55

원래의

1318명이 탐색했습니다.

JavaScript는 가볍고 효율적이며 배우기 쉽고 사용하기 쉬운 특성으로 인해 웹 개발에 널리 사용되는 프런트 엔드 프로그래밍 언어입니다. 웹 디자인에서 내비게이션 메뉴는 웹 사이트의 콘텐츠를 보다 체계적으로 구성하고 접근성을 높일 수 있는 필수 구성 요소입니다. 이번 글에서는 자바스크립트를 이용하여 간단한 네비게이션 메뉴를 구현하는 방법을 소개하겠습니다.

HTML

먼저 탐색 메뉴를 저장하기 위해 HTML로 컨테이너를 만들어야 합니다. 이 컨테이너는 ul 요소 또는 div 요소일 수 있습니다. 이 기사에서는 ul 요소를 사용하여 탐색 메뉴를 구현하겠습니다.

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

로그인 후 복사

다음으로 탐색 메뉴의 스타일을 지정해야 합니다. 여기에는 메뉴 항목 색상, 크기, 여백 등이 포함됩니다. 이 글에서는 마우스 오버 시 메뉴 항목의 배경색과 현재 선택된 메뉴 항목의 스타일을 설정해야 합니다.

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 5px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

#nav a:hover {
    background-color: #999;
    color: #fff;
}

#nav .current a {
    background-color: #999;
    color: #fff;
}

로그인 후 복사

위 코드에서는 #nav 아래 탐색 메뉴 스타일과 #nav li 및 #nav a 아래 메뉴 항목 스타일을 정의합니다. 메뉴 항목을 수평으로 정렬하려면 float 속성을 사용하고, 메뉴 항목의 여백을 설정하려면 margin 속성을 사용합니다. 메뉴 항목 위에 마우스를 올리면 배경색이 회색으로, 텍스트 색상이 흰색으로 변경되고, 메뉴 항목이 선택되면 배경색이 검정색으로, 텍스트 색상이 흰색으로 변경됩니다.

JavaScript

마지막으로 메뉴 항목의 클릭 이벤트를 구현하려면 JavaScript를 사용해야 합니다. 현재 선택한 메뉴 항목을 .active 스타일로 설정하고 이전에 선택한 메뉴 항목에서 .active 스타일을 제거해야 합니다. document.getElementById() 메서드를 사용하여 메뉴 항목을 가져온 다음 classList.add() 및 classList.remove() 메서드를 사용하여 스타일을 추가하거나 제거할 수 있습니다.

var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        for (var j = 0; j < links.length; j++) {
            links[j].parentNode.classList.remove('active');
        }
        this.parentNode.classList.add('active');
    });
}

로그인 후 복사

위 코드에서는 먼저 메뉴 항목의 상위 요소 #nav와 모든 메뉴 항목 a를 가져온 다음 for 루프를 사용하여 각 메뉴 항목에 클릭 이벤트를 추가합니다. 메뉴 항목을 클릭하면 먼저 for 루프를 사용하여 이전에 선택한 메뉴 항목의 .active 스타일을 제거한 다음 현재 선택한 메뉴 항목의 .active 스타일을 추가합니다.

완전한 코드

마지막으로 HTML, CSS 및 JavaScript 코드를 결합하여 완전한 탐색 메뉴 구현 코드를 얻습니다.

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 5px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

#nav a:hover {
    background-color: #999;
    color: #fff;
}

#nav .current a {
    background-color: #999;
    color: #fff;
}

var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        for (var j = 0; j < links.length; j++) {
            links[j].parentNode.classList.remove('active');
        }
        this.parentNode.classList.add('active');
    });
}

로그인 후 복사

위는 JavaScript를 이용하여 네비게이션 메뉴를 구현하기 위한 완성된 코드입니다. 이를 자신의 웹사이트에 적용하면 사용자가 웹사이트 콘텐츠를 더 잘 탐색할 수 있습니다.

위 내용은 자바스크립트로 탐색 메뉴를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!