JavaScript implements left navigation bar and right page jump

In web design, the navigation bar is one of the important components of the page. It can effectively help users find the functional pages they need. Common navigation bars include top navigation and left navigation. In interaction design, implementing navigation bars and page jumps requires the use of some JavaScript techniques.

This article will introduce how to use javascript to implement the left navigation bar and cooperate with the right page jump. I hope it will be helpful to beginners.

1. Interface layout

First of all, we need to determine the layout design of the navigation bar. In this example, we present the left side in the form of a tree structure, and the selected font is Microsoft Yahei, the color is #333, and the background color is #fff; the right page block uses a white background with black fonts. Make the overall page simple and beautiful. The tree structure code is as follows:

<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>

The right page block code is as follows:

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

2. Style setting

After the layout design is determined, the style needs to be set. In this example, we set css styles for elements to make the page look more beautiful. For the navigation bar, we need to set the styles of ul, li, span, a and other elements. The code is as follows:

.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;
}

For the right page block, we need to set the styles of margins, fonts and other elements. The code is as follows:

.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

For the left navigation bar, we need to realize that after clicking to select an item, the right page will jump to the corresponding page, and add a style mark to the selected navigation bar . The implementation code is as follows:

// 获取左侧导航栏中的所有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';
    });
});

We save the code as a js file, and then import it into the page to realize the responsive navigation bar, the left navigation bar and the right page jump.

At this point, we have completed the code part of this example. Through this simple example, I believe readers will have a basic understanding of how to use JavaScript to implement responsive navigation bars and page jumps on the right, and it can also be used flexibly in future web design.

The above is the detailed content of JavaScript implements left navigation bar and right page jump. For more information, please follow other related articles on the PHP Chinese website!