今天在寫一個tab效果時遇到一個問題，迷惑了一會，以前同一個效果寫過很多回，都沒出現(xiàn)這個問題。剛開始還真有點二丈的和尚摸不著頭腦，不知道這是怎么回事，心里犯嘀咕，這里從來都沒有出過bug呀？？？

創(chuàng)新互聯(lián)公司專注于嘉善網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供嘉善營銷型網(wǎng)站建設(shè)，嘉善網(wǎng)站制作、嘉善網(wǎng)頁設(shè)計、嘉善網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造嘉善網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供嘉善網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

  問題描述與分析：在選項卡切換的時候，有class屬性名為“selected”的相鼠標(biāo)經(jīng)過時，也會出現(xiàn)“hover”的效果。正常情況下是選中的相不會有鼠標(biāo)經(jīng)過的效果，只有沒有選中的相才會有鼠標(biāo)經(jīng)過的效果。出現(xiàn)這個問題，我首先看jq的代碼，發(fā)現(xiàn)沒有問題，一丁點問題都沒有。半天之后，我想，難道是我的CSS有問題。想到這里，就是關(guān)鍵了。問題還真的出在這里。其實選中與不選中都有"hover"事件的，只是看他們表現(xiàn)的是哪個樣式。這個時候應(yīng)該讓".selected"的樣式寫在".hover"樣式的后面，因為在CSS里，優(yōu)先級的關(guān)系，后寫的優(yōu)先于先寫的，如果選擇器級別一樣的話。

代碼呈現(xiàn)：

div:

<div class="tab">
                    <div class="tab_menu">
                        <ul>
                            <li class="selected">產(chǎn)品屬性</li>
                            <li>產(chǎn)品尺碼表</li>
                            <li>產(chǎn)品介紹</li>
                        </ul>
                    </div>
                    <div class="tab_box">
                        <div>
                            沿用風(fēng)靡百年的經(jīng)典全棉牛津紡面料，通過領(lǐng)先的液氨整理技術(shù)，使面料的抗皺性能更上一層。延續(xù)簡約、舒適、健康設(shè)計理念，特推出免燙、易打理的精細免燙牛津紡長袖襯衫系列。
                        </div>
                        <div class="hide">
                            來自新疆無污染的生態(tài)棉花，采用緊密紡精梳棉紗，單經(jīng)雙緯的織造組織，造就了顆粒飽滿、樸實無華、溫潤細膩的經(jīng)典牛津紡，易洗快干、手感豐軟、吸濕性好。設(shè)計師遵循布料完美肌理，立體剪裁，曲擺的現(xiàn)代人性化裁減，相得益彰，渾然天成。
                        </div>
                        <div class="hide">
                            世界權(quán)威德國科德寶的襯和英國高士縫紉線使成衣領(lǐng)型自然舒展、永不變形，縫線部位平服工整、牢固耐磨；人性化的4片式后背打褶結(jié)構(gòu)設(shè)計提供更舒適的活動空間；領(lǐng)尖扣的領(lǐng)型設(shè)計戴或不戴領(lǐng)帶風(fēng)格炯同、瞬間呈現(xiàn)；醇正天然設(shè)計，只為彰顯自然榮耀。
                        </div>
                    </div>
                </div>

JQ:

var $div_li=$(".tab_menu ul li");
    $div_li.click(function(){
        $(this).addClass("selected")
            .siblings().removeClass("selected");
        var index=$div_li.index(this);
        $(".tab_box div").eq(index).show()
            .siblings().hide();
    }).hover(function(){
        $(this).addClass("hover");
    },function(){
        $(this).removeClass("hover");
    });

CSS:

.tab_menu ul li{
    float:left;
   width:auto;
    margin-right:4px;
    border:1px solid #898989;
    border-bottom:none;
    padding:1px 6px;
    background:#f1f1f1;
    cursor:pointer;
}
.tab_menu ul li.hover{
    background:#dfdfdf;
}
.tab_menu ul li.selected{
    color:#fff;
    background:#6D84B4;
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：jQuery與CSS結(jié)合制作tab效果有一個很重要的地方需要注意。-創(chuàng)新互聯(lián)
本文路徑：http://www.chinadenli.net/article18/dsohdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、域名注冊、網(wǎng)站維護、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航、企業(yè)網(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)