JavaScript는 왼쪽 탐색 모음과 오른쪽 페이지 점프를 구현합니다.

웹 디자인에서 탐색 모음은 페이지의 중요한 구성 요소 중 하나이며 사용자가 필요한 기능 페이지를 찾는 데 효과적으로 도움을 줄 수 있습니다. 일반적인 탐색 모음에는 상단 탐색과 왼쪽 탐색이 포함됩니다. 상호 작용 디자인에서 탐색 모음 및 페이지 이동을 구현하려면 일부 JavaScript 기술을 사용해야 합니다.

이 글에서는 자바스크립트를 사용하여 왼쪽 네비게이션 바를 구현하고 오른쪽 페이지 점프를 협력하는 방법을 소개하겠습니다. 초보자에게 도움이 되길 바랍니다.

1. 인터페이스 레이아웃

우선 네비게이션 바의 레이아웃 디자인을 결정해야 합니다. 이 예에서는 왼쪽을 트리 구조 형태로 표현하고 선택한 글꼴은 Microsoft Yahei, 색상은 #333, 배경색은 #fff입니다. 오른쪽 페이지 블록은 검정색 글꼴이 있는 흰색 배경을 사용합니다. . 전체적인 페이지를 심플하고 아름답게 만들어보세요. 트리 구조 코드는 다음과 같습니다.

<ul class="tree">
    <li>
        <span>导航1</span>
        <ul>
            <li><a href="#">子导航1</a></li>
            <li><a href="#">子导航2</a></li>
        </ul>
    </li>    
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
</ul>

오른쪽 페이지 블록 코드는 다음과 같습니다.

<div class="content">
    <div class="title">标题</div>
    <div class="page">内容</div>
</div>

2. 스타일 설정

레이아웃 디자인이 결정되면 스타일을 설정해야 합니다. 이 예에서는 페이지를 더욱 아름답게 보이도록 요소에 CSS 스타일을 설정했습니다. 탐색 모음의 경우 ul, li,span, a 및 기타 요소의 스타일을 설정해야 합니다. 코드는 다음과 같습니다.

.tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tree li {
    margin-bottom: 3px;
}
.tree span, .tree a {
    display: block;
    padding: 5px;
    text-decoration: none;
}
.tree ul {
    margin: 0 0 0 20px;
}
.tree ul li {
    margin-bottom: 0;
}

올바른 페이지 블록의 경우 여백, 글꼴 및 기타 스타일을 설정해야 합니다. 코드는 다음과 같습니다:

.content {
    margin: 20px;
    background-color: #fff;
}
.title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.page {
    font-size: 14px;
    line-height: 1.5;
}

3. javascript Code

왼쪽 탐색 모음의 경우 항목을 클릭하면 오른쪽 페이지가 해당 페이지로 이동하고 스타일 표시를 추가한다는 점을 인식해야 합니다. 선택한 탐색 모음으로 이동합니다. 구현 코드는 다음과 같습니다.

// 获取左侧导航栏中的所有LI元素，以及右侧页面的所有内容块
let liList = document.querySelectorAll('.tree li');
let contentList = document.querySelectorAll('.content .page');

// 为每个导航栏的a标签添加点击事件
liList.forEach(function (li, index) {
    let a = li.querySelector('a');
    a.addEventListener('click', function (e) {
        // 阻止a标签默认跳转事件
        e.preventDefault();

        // 遍历所有导航栏，将选中项样式设置为active，其他取消。
        liList.forEach(function (li) {
            li.classList.remove('active');
        });
        li.classList.add('active');

        // 遍历所有页面块，只显示选中项的页面块，其他隐藏。
        contentList.forEach(function (content) {
            content.style.display = 'none';
        });
        contentList[index].style.display = 'block';
    });
});

코드를 js 파일로 저장한 다음 페이지로 가져와 반응형 탐색 모음을 구현하고 왼쪽 탐색 모음과 오른쪽 페이지 이동을 구현합니다.

이제 이 예제의 코드 부분이 완성되었습니다. 이 간단한 예를 통해 독자들은 JavaScript를 사용하여 오른쪽에 반응형 탐색 표시줄과 페이지 점프를 구현하는 방법에 대한 기본적인 이해를 얻었으며 향후 웹 디자인에도 유연하게 적용할 수 있다고 믿습니다.

위 내용은 JavaScript는 왼쪽 탐색 모음과 오른쪽 페이지 점프를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!