Bagaimana untuk melaksanakan menu navigasi dalam javascript

JavaScript ialah bahasa pengaturcaraan bahagian hadapan yang digunakan secara meluas dalam pembangunan web kerana cirinya yang ringan, cekap, mudah dipelajari dan digunakan. Dalam reka bentuk web, menu navigasi merupakan komponen penting yang menjadikan kandungan tapak web lebih teratur dan boleh diakses. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan menu navigasi mudah menggunakan JavaScript.

1. HTML

Mula-mula, kita perlu mencipta bekas dalam HTML untuk menyimpan menu navigasi. Bekas ini boleh menjadi elemen ul atau elemen div. Dalam artikel ini, kami akan menggunakan elemen ul untuk melaksanakan menu navigasi.

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

2. CSS

Seterusnya, kita perlu menggayakan menu navigasi. Ini termasuk warna item menu, saiz, jidar, dsb. Dalam artikel ini, kita perlu menetapkan warna latar belakang item menu pada tetikus serta gaya item menu yang sedang dipilih.

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 5px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

#nav a:hover {
    background-color: #999;
    color: #fff;
}

#nav .current a {
    background-color: #999;
    color: #fff;
}

Dalam kod di atas, kami mentakrifkan gaya menu navigasi di bawah #nav dan gaya item menu di bawah #nav li dan #nav a. Kami menggunakan atribut apungan untuk menyusun item menu secara mendatar, dan atribut margin untuk menetapkan margin item menu. Apabila tetikus melayang di atas item menu, kami menukar warna latar belakangnya kepada kelabu dan warna teks kepada putih dan apabila item menu dipilih, kami menukar warna latar belakangnya kepada hitam dan warna teks kepada Putih.

3. JavaScript

Akhir sekali, kita perlu menggunakan JavaScript untuk melaksanakan acara klik item menu. Kita perlu menetapkan item menu yang dipilih pada masa ini kepada gaya .aktif dan mengalih keluar gaya .aktif daripada item menu yang dipilih sebelum ini. Kita boleh menggunakan kaedah document.getElementById() untuk mendapatkan item menu, dan kemudian menggunakan kaedah classList.add() dan classList.remove() untuk menambah atau mengalih keluar gaya.

var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        for (var j = 0; j < links.length; j++) {
            links[j].parentNode.classList.remove('active');
        }
        this.parentNode.classList.add('active');
    });
}

Dalam kod di atas, kami mula-mula mendapatkan elemen induk #nav item menu dan semua item menu a, kemudian gunakan gelung for untuk menambah acara klik pada setiap item menu. Apabila item menu diklik, kami mula-mula menggunakan gelung for untuk mengalih keluar gaya .aktif item menu yang dipilih sebelum ini, dan kemudian menambah gaya .aktif item menu yang dipilih pada masa ini.

4. Kod lengkap

Akhir sekali, gabungkan kod HTML, CSS dan JavaScript untuk mendapatkan kod pelaksanaan menu navigasi yang lengkap.

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 5px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

#nav a:hover {
    background-color: #999;
    color: #fff;
}

#nav .current a {
    background-color: #999;
    color: #fff;
}

var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        for (var j = 0; j < links.length; j++) {
            links[j].parentNode.classList.remove('active');
        }
        this.parentNode.classList.add('active');
    });
}

Di atas ialah kod lengkap untuk melaksanakan menu navigasi menggunakan JavaScript. Anda boleh menggunakannya pada tapak web anda sendiri untuk membantu pengguna menyemak imbas kandungan tapak web dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan menu navigasi dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!