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

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.

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>

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>

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!