溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

一段jquery代碼搞定多個(gè)tab效果

發(fā)布時(shí)間：2020-07-22 05:24:33 來源：網(wǎng)絡(luò) 閱讀：477 作者：DanielYue 欄目：web開發(fā)

    現(xiàn)在的頁面上幾乎都要tab切換甚至不止一個(gè)，早有想法嘗試用一段代碼控制所有tab的方法，自己嘗試了一下。里面有幾個(gè)要點(diǎn)抓住就好了。

           <style>
            .wrap{
                width:100%;
                height:800px;
                position: relative;
            }
            .wrap2{
                width:100%;
                height:800px;
                position: relative;
            }
            .title{
                width:200px;
                height:50px;
                background-color:#ccc;
                display:inline-block;
            }
            .box{
                width:600px;
                height:300px;
                border:1px solid red;
                display:none;
                position: absolute;
            }
        </style>
</head>
<body>
    
    <div class="wrap">
        <p class="title">1</p>
        <p class="title">2</p>
        <p class="title">2</p>
        <p ></p>
            <div class="box" >a</div>
            <div class="box">b</div>
            <div class="box">c</div>        
    </div>
        <div class="wrap2">
        <p class="title">1</p>
        <p class="title">2</p>
        <p class="title">2</p>
        <p ></p>
            <div class="box" >a</div>
            <div class="box">b</div>
            <div class="box">c</div>        
    </div>    <script>    
    $(function(){
        
        $('.title').click(function(){
            var $this=$(this);
            var $pare=$this.parent();
            //alert($this)
            //alert($pare.find(".box").eq($this));
            $pare.find(".box").eq($this.index()).show().siblings(".box").hide();
        })
    })
    </script>

    代碼思路：1，共同點(diǎn)有什么？結(jié)構(gòu)一樣，比如tab的切換塊和下面的顯示塊都是一樣的結(jié)構(gòu)，他們下面顯示塊的下標(biāo)總是與上面的下標(biāo)一樣。換句話說，他們的this.index值都可以直接從上面的切換塊傳值。

2，有一個(gè)問題就是他們都是部門的代碼結(jié)構(gòu)塊，怎么能只用this.index傳遞一個(gè)下標(biāo)就可以解決呢，或者會(huì)出現(xiàn)一個(gè)經(jīng)常會(huì)出現(xiàn)的問題，就是一個(gè)切換，所有的tab都會(huì)切換。但是有一個(gè)不同點(diǎn)是什么呢？就是他們的父親不一樣，所以這就是問題所在，我們可以用this點(diǎn)擊的對象找到父元素，從父元素再去找對應(yīng)的顯示塊就解決了，當(dāng)然還要優(yōu)化，只是呈現(xiàn)了最簡單的代碼實(shí)現(xiàn)了基本效果僅供展示。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手