鍍金池/ 問答/HTML/ 如何使用jquery實(shí)現(xiàn)以下效果

如何使用jquery實(shí)現(xiàn)以下效果

clipboard.png

clipboard.png
當(dāng)沒有選擇其他兩個tab,鼠標(biāo)移上去會變色,如果鼠標(biāo)移到選中的tab不會變色

代碼:

<ul class="fixed_bar" style="">
    <li class="status_on active">
        <a href="#status1">產(chǎn)品介紹</a>
    </li>
    <li class="status_on">
        <a href="#status2">商品評價<span>(0)</span></a>
    </li>
    <li class="status_on">
        <a href="#shbz">售后服務(wù)</a>
    </li>
    <div class="statusBtn" style="display:none;">
        <a href="javascript:addToCart_bak(77)" class="statusBtn1" title="加入購物車"></a>
    </div>
</ul>
$( document).ready(function(){
  $('.fixed_bar').find('li').click(function(){
    $('.fixed_bar').find('li').removeClass('active');
    $(this).addClass('active');
  });                                                                    
})

這段代碼是實(shí)現(xiàn)了點(diǎn)擊tab變成紅色,灰色tab字體變橙色的不知道怎么實(shí)現(xiàn)

回答
編輯回答
溫衫

沒有被點(diǎn)擊的,即灰色tab處理:
.status_on :hover{

color:#FF9900

}

2017年3月21日 21:30
編輯回答
舊言

鼠標(biāo)點(diǎn)擊時,弄一個變量
然后鼠標(biāo)移動時的事件里判斷一下變量.來做分支

2018年5月9日 17:49
編輯回答
忘了我
.tab {
    background-color: gray;
}
.tab:hover {
    background-color: yellow;
}
.tab.select {
    background-color: red;
}

注意下最后一條,如果你的類名是class="tab select"這樣疊加使用的,一定記得中間不要有空格,否則會變成包含選擇符就廢了。

2017年4月16日 06:30