Maison > interface Web > tutoriel HTML > Comment implémenter le changement de page à onglet en HTML

Comment implémenter le changement de page à onglet en HTML

coldplay.xixi
Libérer: 2023-01-03 09:27:26
original
16615 Les gens l'ont consulté

Comment implémenter le changement de page à onglets en HTML : créez d'abord un div avec le nom de classe wrap comme conteneur ; puis créez quatre balises d'étiquette, et créez une balise span dans chaque étiquette, enfin, créez un div comme cette navigation ; articles.

Comment implémenter le changement de page à onglet en HTML

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur DELL G3.

Comment implémenter le changement de page à onglet en HTML :

Principe : Afficher le div correspondant via les attributs associés de la balise label et le type de sélection radio de l'entrée

1. Créez un div avec le nom de classe wrap comme conteneur

2. Créez quatre étiquettes d'étiquette, qui serviront d'éléments de changement d'onglet

3. chaque type de balise d'étiquette (contenu de navigation), de balise d'entrée (implémentation de la sélection et de la désélection) est radio, et un div est également créé lorsque la zone de contenu est affichée lorsque vous cliquez sur cet élément de navigation

Ce qu'il faut noter. voici la balise d'entrée Les noms doivent être les mêmes. Je l'ai nommé tab

Le HTML final est le suivant :

<div class="wrap">
    <label>
        <span>home</span>
        <input type="radio" name="tab" checked>
        <div>home-page</div>
    </label>
    <label>
        <span>list</span>
        <input type="radio" name="tab">
        <div>list-page</div>
    </label>
    <label>
        <span>news</span>
        <input type="radio" name="tab">
        <div>news-page</div>
    </label>
    <label>
        <span>mine</span>
        <input type="radio" name="tab">
        <div>mine-page</div>
    </label>
</div>
Copier après la connexion

Le CSS important est de réduire la largeur d'entrée en définissant la largeur. de l'entrée à 0. Les points sont irréalistes, et l'entrée est vérifiée en cliquant sur l'élément de navigation via l'association de l'étiquette, puis le div correspondant est affiché via input:checked+div{display:block}

<style type="text/css">
        *{margin: 0;padding: 0;}
        .wrap{
            margin: 20px auto;
            width: 403px;
            height: 600px;
            border:1px solid brown;
            position: relative;
        }
        label{
            width: 100px;
            height: 30px;
            float: left;
            text-align: center;
            line-height:30px;
            border-right: 1px solid brown;
            border-bottom: 1px solid brown;
        }
        label:nth-of-type(4){
            border-right: none;
        }
        label span{
            cursor: pointer;
        }
        label div{
            width: 403px;
            height: 568px;
            position: absolute;
            left: 0;
            top: 31px;
            background: #eeeeee;
            display: none;
        }
        label input{
            width: 0;
        }
        input:checked+div{
            display: block;
        }
    </style>
Copier après la connexion

Recommandations d'apprentissage associées :Tutoriel vidéo HTML

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal