Comment créer un site Web à onglets en utilisant HTML, CSS et jQuery-js tutoriel-php.cn

Comment créer un site Web à onglets en utilisant HTML, CSS et jQuery

WBOY

Libérer： 2023-10-26 09:54:20

original

684 Les gens l'ont consulté

Comment créer un site Web à onglets en utilisant HTML, CSS et jQuery

Comment utiliser HTML, CSS et jQuery pour créer un site Web avec des onglets

Aujourd'hui, je vais vous présenter comment utiliser HTML, CSS et jQuery pour créer un site Web avec des onglets. Les balises peuvent nous aider à organiser et à afficher efficacement le contenu du site Web et à offrir une meilleure expérience utilisateur. Vous trouverez ci-dessous un exemple de code spécifique.

Tout d’abord, nous utiliserons HTML pour créer la structure de base du site Web. Nous avons besoin d'un conteneur parent qui contient l'onglet et créons un bloc de contenu correspondant à l'onglet qu'il contient.

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

Copier après la connexion

Ensuite, nous utiliserons CSS pour styliser nos onglets. Nous utiliserons la mise en page flexible pour implémenter la disposition des étiquettes et des blocs de contenu, ainsi qu'un style de base.

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

Copier après la connexion

Enfin, nous utiliserons jQuery pour obtenir l'effet de changement d'étiquette.

$(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");
    });
});

Copier après la connexion

Nous avons maintenant un site Web terminé avec des onglets. Lorsque nous cliquons sur différents onglets, les blocs de contenu correspondants seront affichés et les autres blocs de contenu seront masqués. Nous pouvons ajouter plus de balises et de blocs de contenu en fonction de nos besoins.

J'espère que cet article vous sera utile et vous permettra de créer facilement un site Web avec des onglets en utilisant HTML, CSS et jQuery. Si vous avez des questions, n'hésitez pas à les poser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!