jQuery與CSS結合製作tab效果有一個很重要的地方需要注意。

   今天在寫一個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;
}