Maison >interface Web >js tutoriel >Effet d'affichage déroulant des onglets du changement d'onglet (exemple de code)

Effet d'affichage déroulant des onglets du changement d'onglet (exemple de code)

青灯夜游
青灯夜游avant
2018-10-25 15:10:202419parcourir

Le contenu de cet article est de présenter l'effet d'affichage déroulant des onglets du changement d'onglet (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    ul,li{
        list-style: none;
    }
    #warp{
        width: 600px;
        height: auto;
        margin: 0 auto;
        margin-top: 20px;
    }
    #warp .content p{
        width: 300px;
        height: 30px;
        background-color: #000;
        color: #fff;
        line-height: 30px;
        text-align: center;
    }
    #warp .content+ .content{
        margin-top: 2px;
    }
    #warp .content ul{
        display: none;
    }
    #warp .content ul.on{
        display: block;
    }
    #warp .content li{
        background-color: #ccc;
        width: 300px;
        text-align: center;
    }
    #warp .content li + li{
        margin-top: 1px;
    }
</style>
<body>
    <p id="warp">
        <p class="content">
            <p>动物</p>
            <ul>
                <li>猴子</li>
                <li>大象</li>
                <li>狮子</li>
            </ul>
        </p>
        <p class="content">
            <p>山川</p>
            <ul>
                <li>长江</li>
                <li>黄河</li>
                <li>井水</li>
            </ul>
        </p>
        <p class="content">
            <p>美女</p>
            <ul>
                <li>貂蝉</li>
                <li>西施</li>
                <li>秀秀</li>
            </ul>
        </p>      
    </p>
    <script>
        let oP = document.getElementsByTagName("p"),
aUl = document.getElementsByTagName("ul"),
index;
            console.log(oP.length);
            for(var i=0;i<oP.length;i++){
                oP[i].index = i;
                oP[i].onclick = function(){
                index = this.index;
                aUl[index].className =  aUl[index].className === ""? "on" : "";
                console.log(i)
            }
        }
    </script>
</body>
</html>

Rendu :

Effet daffichage déroulant des onglets du changement donglet (exemple de code)

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer