JavaScript melaksanakan bar navigasi kiri dan lompat halaman kanan

Dalam reka bentuk web, bar navigasi ialah salah satu komponen penting halaman tersebut dengan berkesan dapat membantu pengguna mencari halaman berfungsi yang mereka perlukan. Bar navigasi biasa termasuk navigasi atas dan navigasi kiri. Dalam reka bentuk interaksi, melaksanakan bar navigasi dan lompatan halaman memerlukan penggunaan beberapa teknik JavaScript.

Artikel ini akan memperkenalkan cara menggunakan javascript untuk melaksanakan bar navigasi kiri dan bekerjasama dengan lompatan halaman di sebelah kanan saya harap ia akan membantu pemula.

1. Reka letak antara muka

Pertama sekali, kita perlu menentukan reka bentuk reka letak bar navigasi. Dalam contoh ini, kami membentangkan bahagian kiri dalam bentuk struktur pokok, dan fon yang dipilih ialah Microsoft Yahei, warnanya ialah #333, dan warna latar belakang ialah #fff menggunakan latar belakang putih dengan fon hitam . Jadikan keseluruhan halaman ringkas dan cantik. Kod struktur pokok adalah seperti berikut:

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

Kod blok halaman yang betul adalah seperti berikut:

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

2. Tetapan gaya

Selepas reka bentuk susun atur ditentukan, gaya perlu ditetapkan. Dalam contoh ini, kami menetapkan gaya css untuk elemen untuk menjadikan halaman kelihatan lebih cantik. Untuk bar navigasi, kita perlu menetapkan gaya ul, li, span, a dan elemen lain Kodnya adalah seperti berikut:

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

Untuk blok halaman yang betul, kita perlu menetapkan gaya margin. , fon dan elemen lain. Kodnya adalah seperti berikut:

.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 Kod JavaScript

Untuk bar navigasi kiri, kita perlu sedar bahawa selepas mengklik untuk memilih item, halaman kanan. akan melompat ke halaman yang sepadan dan menambah tanda gaya pada bar navigasi yang dipilih . Kod pelaksanaan adalah seperti berikut:

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

Kami menyimpan kod sebagai fail js, dan kemudian mengimportnya ke dalam halaman untuk melaksanakan bar navigasi responsif, merealisasikan bar navigasi kiri dan lompat halaman kanan.

Pada ketika ini, kami telah melengkapkan bahagian kod contoh ini. Melalui contoh mudah ini, saya percaya pembaca mempunyai pemahaman asas tentang cara menggunakan JavaScript untuk melaksanakan bar navigasi responsif dan lompatan halaman di sebelah kanan, dan juga boleh menggunakannya secara fleksibel dalam reka bentuk web masa hadapan.

Atas ialah kandungan terperinci JavaScript melaksanakan bar navigasi kiri dan lompat halaman kanan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!