如何使用jquery实现以下效果

学思
  • 34

clipboard.png

clipboard.png
当没有选择其他两个tab,鼠标移上去会变色,如果鼠标移到选中的tab不会变色

代码:

<ul class="fixed_bar" style="">
    <li class="status_on active">
        <a href="#status1">产品介绍</a>
    </li>
    <li class="status_on">
        <a href="#status2">商品评价<span>(0)</span></a>
    </li>
    <li class="status_on">
        <a href="#shbz">售后服务</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');
  });                                                                    
})

这段代码是实现了点击tab变成红色,灰色tab字体变橙色的不知道怎么实现

评论
阅读 897
3 个回答
.tab {
    background-color: gray;
}
.tab:hover {
    background-color: yellow;
}
.tab.select {
    background-color: red;
}

注意下最后一条,如果你的类名是class="tab select"这样叠加使用的,一定记得中间不要有空格,否则会变成包含选择符就废了。

鼠标点击时,弄一个变量
然后鼠标移动时的事件里判断一下变量.来做分支

没有被点击的,即灰色tab处理:
.status_on :hover{

color:#FF9900

}

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏