javascript 實作 左側導覽列 右側頁面跳轉

在網頁設計中，導覽列是頁面重要組成部分之一，它能夠有效地幫助使用者找到所需的功能頁面。常見的導覽列有頂部導覽和左側導覽。而在互動設計中，實現導覽列及頁面跳轉便需要運用一些javascript的技巧。

本文將介紹如何使用javascript實作左側導覽欄，並配合右側頁面跳轉，希望對初學者有所幫助。

一、介面佈局

首先，我們需要確定關於導覽列的佈局設計。在本次實例中，我們將左側運用了樹狀結構的形式呈現，且選定字體為微軟雅黑，顏色為#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>

二、樣式設定

#在確定了版面設計後，便需要設定樣式。在本次實例中，我們針對元素設定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;
}

三、javascript程式碼

針對左側導覽欄，我們需要實現點擊選取某一項後右側頁面跳轉至對應的頁面，並在選取的導覽列中新增樣式標識。實作程式碼如下：

// 获取左侧导航栏中的所有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中文網其他相關文章！