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

創新互聯公司專注于嘉善網站建設服務及定制，我們擁有豐富的企業做網站經驗。 熱誠為您提供嘉善營銷型網站建設，嘉善網站制作、嘉善網頁設計、嘉善網站官網定制、重慶小程序開發服務，打造嘉善網絡公司原創品牌,更為您提供嘉善網站排名全網營銷落地服務。

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

代碼呈現：

div:

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

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

文章標題：jQuery與CSS結合制作tab效果有一個很重要的地方需要注意。-創新互聯
本文路徑：http://vcdvsql.cn/article18/dsohdp.html

成都網站建設公司_創新互聯，為您提供App開發、域名注冊、網站維護、自適應網站、面包屑導航、企業網站制作

廣告

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