Cara membuat laman web bertab menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Cara membuat laman web bertab menggunakan HTML, CSS dan jQuery

WBOY

Lepaskan： 2023-10-26 09:54:20

asal

716 orang telah melayarinya

Cara membuat laman web bertab menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk membuat laman web dengan tab

Hari ini, saya akan memperkenalkan kepada anda cara menggunakan HTML, CSS dan jQuery untuk membuat laman web dengan tab. Teg boleh membantu kami mengatur dan memaparkan kandungan tapak web dengan berkesan dan memberikan pengalaman pengguna yang lebih baik. Di bawah ialah contoh kod khusus.

Pertama, kami akan menggunakan HTML untuk mencipta struktur asas laman web. Kami memerlukan bekas induk yang mengandungi tab dan buat blok kandungan yang sepadan dengan tab di dalamnya.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带有标签页的网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="tabs">
        <ul class="tab-links">
            <li class="active"><a href="#tab1">标签1</a></li>
            <li><a href="#tab2">标签2</a></li>
            <li><a href="#tab3">标签3</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab active">
                <h2>标签1内容</h2>
                <p>这是标签1的内容。</p>
            </div>
            <div id="tab2" class="tab">
                <h2>标签2内容</h2>
                <p>这是标签2的内容。</p>
            </div>
            <div id="tab3" class="tab">
                <h2>标签3内容</h2>
                <p>这是标签3的内容。</p>
            </div>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Seterusnya, kami akan menggunakan CSS untuk menggayakan tab kami. Kami akan menggunakan reka letak fleksibel untuk melaksanakan susunan label dan blok kandungan, serta beberapa penggayaan asas.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.tabs {
    margin: 20px;
}

.tab-links {
    display: flex;
    list-style: none;
    padding: 0;
}

.tab-links li {
    margin-right: 10px;
}

.tab-links li a {
    display: block;
    padding: 10px;
    background-color: #ccc;
    text-decoration: none;
    color: #000;
    border-radius: 5px 5px 0 0;
}

.tab-links li.active a {
    background-color: #fff;
}

.tab-content {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 0 5px 5px 5px;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}

Salin selepas log masuk

Akhir sekali, kami akan menggunakan jQuery untuk mencapai kesan penukaran label.

$(document).ready(function() {
    $(".tab-links li").click(function() {
        var tabId = $(this).find("a").attr("href");

        $(".tab").removeClass("active");
        $(".tab-links li").removeClass("active");

        $(this).addClass("active");
        $(tabId).addClass("active");
    });
});

Salin selepas log masuk

Kini kami mempunyai laman web yang lengkap dengan tab. Apabila kita mengklik pada tab yang berbeza, blok kandungan yang sepadan akan dipaparkan dan blok kandungan lain akan disembunyikan. Kami boleh menambah lebih banyak tag dan blok kandungan mengikut keperluan kami.

Saya harap artikel ini akan membantu anda dan membolehkan anda membuat tapak web dengan mudah menggunakan tab menggunakan HTML, CSS dan jQuery. Jika anda mempunyai sebarang soalan, sila berasa bebas untuk bertanya.

Atas ialah kandungan terperinci Cara membuat laman web bertab menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!