js中tab下拉顯示效果的實現(xiàn)方法

這篇文章主要介紹了js中tab下拉顯示效果的實現(xiàn)方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站建設、成都做網(wǎng)站、吳堡網(wǎng)絡推廣、微信平臺小程序開發(fā)、吳堡網(wǎng)絡營銷、吳堡企業(yè)策劃、吳堡品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供吳堡建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：muchs.cn

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

效果圖：

js中tab下拉顯示效果的實現(xiàn)方法

感謝你能夠認真閱讀完這篇文章，希望小編分享的“js中tab下拉顯示效果的實現(xiàn)方法”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

分享題目：js中tab下拉顯示效果的實現(xiàn)方法
路徑分享：http://muchs.cn/article14/ihgige.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、網(wǎng)頁設計公司、定制開發(fā)、網(wǎng)站營銷、小程序開發(fā)、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設公司