怎么使用javascript實(shí)現(xiàn)左側(cè)導(dǎo)航欄并配合右側(cè)頁(yè)面跳轉(zhuǎn)

本文小編為大家詳細(xì)介紹“怎么使用javascript實(shí)現(xiàn)左側(cè)導(dǎo)航欄并配合右側(cè)頁(yè)面跳轉(zhuǎn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么使用javascript實(shí)現(xiàn)左側(cè)導(dǎo)航欄并配合右側(cè)頁(yè)面跳轉(zhuǎn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、界面布局

首先，我們需要確定關(guān)于導(dǎo)航欄的布局設(shè)計(jì)。在本次實(shí)例中，我們將左側(cè)運(yùn)用了樹(shù)形結(jié)構(gòu)的形式呈現(xiàn)，且選定字體為微軟雅黑，顏色為#333，背景色為#fff;右側(cè)頁(yè)面塊運(yùn)用白色背景配合黑色字體，使整體頁(yè)面簡(jiǎn)潔、美觀。樹(shù)形結(jié)構(gòu)代碼如下：

<ul class="tree">
    <li>
        <span>導(dǎo)航1</span>
        <ul>
            <li><a href="#">子導(dǎo)航1</a></li>
            <li><a href="#">子導(dǎo)航2</a></li>
        </ul>
    </li>    
    <li><a href="#">導(dǎo)航2</a></li>
    <li><a href="#">導(dǎo)航3</a></li>
    <li><a href="#">導(dǎo)航4</a></li>
</ul>

右側(cè)頁(yè)面塊代碼如下：

<div class="content">
    <div class="title">標(biāo)題</div>
    <div class="page">內(nèi)容</div>
</div>

二、樣式設(shè)置

在確定了布局設(shè)計(jì)后，便需要設(shè)置樣式。在本次實(shí)例中，我們針對(duì)元素設(shè)置css樣式，使頁(yè)面看起來(lái)更優(yōu)美。對(duì)于導(dǎo)航欄，我們需要設(shè)置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;
}

對(duì)于右側(cè)頁(yè)面塊，我們需要設(shè)置邊距、字體等樣式，代碼如下：

.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代碼

針對(duì)左側(cè)導(dǎo)航欄，我們需要實(shí)現(xiàn)點(diǎn)擊選中某一項(xiàng)后右側(cè)頁(yè)面跳轉(zhuǎn)至對(duì)應(yīng)的頁(yè)面，并在選中的導(dǎo)航欄中添加樣式標(biāo)識(shí)。實(shí)現(xiàn)代碼如下：

// 獲取左側(cè)導(dǎo)航欄中的所有LI元素，以及右側(cè)頁(yè)面的所有內(nèi)容塊
let liList = document.querySelectorAll('.tree li');
let contentList = document.querySelectorAll('.content .page');

// 為每個(gè)導(dǎo)航欄的a標(biāo)簽添加點(diǎn)擊事件
liList.forEach(function (li, index) {
    let a = li.querySelector('a');
    a.addEventListener('click', function (e) {
        // 阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)事件
        e.preventDefault();

        // 遍歷所有導(dǎo)航欄，將選中項(xiàng)樣式設(shè)置為active，其他取消。
        liList.forEach(function (li) {
            li.classList.remove('active');
        });
        li.classList.add('active');

        // 遍歷所有頁(yè)面塊，只顯示選中項(xiàng)的頁(yè)面塊，其他隱藏。
        contentList.forEach(function (content) {
            content.style.display = 'none';
        });
        contentList[index].style.display = 'block';
    });
});

我們將代碼保存為js文件，然后將其導(dǎo)入到頁(yè)面中即可實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄，實(shí)現(xiàn)左側(cè)導(dǎo)航欄及右側(cè)頁(yè)面跳轉(zhuǎn)。

讀到這里，這篇“怎么使用javascript實(shí)現(xiàn)左側(cè)導(dǎo)航欄并配合右側(cè)頁(yè)面跳轉(zhuǎn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。