Question

我有三个项目：General，Secretary和Treasurer。我想这样做，当我将鼠标悬停在链接上时，文本下方会出现一个边框。但我也希望这样做，以便在我点击之后，边框仍然存在。点击后，如果我将鼠标悬停在另一个链接上，边框也会出现（例如，我点击一般，然后一个红色边框应该停留;如果我然后悬停在秘书上，红色边框停留，但出现绿色边框;如果我然后点击秘书，红色边框消失，绿色边框停留）

这是我的js：

$(document).ready(function(){
    var height = $(".content_box").height() - 50;
    $(".general_box").css("height","0");
    $(".general_box").css("border-bottom","4px solid white");

    $("#general_heading a")
        .hover(function(){
            $(this).css("border-bottom","4px solid rgb(230,0,0)");
            $("#secretary_heading a").css("border-bottom","4px solid white");
            $("#treasurer_heading a").css("border-bottom","4px solid white");
        },function(){
            $(this).css("border-bottom","4px solid white");
        })
        .click(function(){
            $(this).css("border-bottom","4px solid rgb(230,0,0)");
            $("#secretary_heading a").css("border-bottom","4px solid white");
            $("#treasurer_heading a").css("border-bottom","4px solid white");

            $("#secretary_box").stop(true).css("height","0");
            $("#treasurer_box").stop(true).css("height","0");
            $("#general_box").animate({height:height},2000,"easeOutBounce");
            $("#general_box ul").fadeIn(2000);
            $("#secretary_box ul").css("display","none");
            $("#treasurer_box ul").css("display","none");
        });

    $("#secretary_heading a")
        .hover(function(){
            $(this).css("border-bottom","4px solid rgb(0,180,0)");
            $("#treasurer_heading a").css("border-bottom","4px solid white");
            $("#general_heading a").css("border-bottom","4px solid white");
        },function(){
            $(this).css("border-bottom","4px solid white");
        })
        .click(function(){
            $(this).css("border-bottom","4px solid rgb(0,180,0)");
            $("#treasurer_heading a").css("border-bottom","4px solid white");
            $("#general_heading a").css("border-bottom","4px solid white");

            $("#general_box").stop(true).css("height","0");
            $("#treasurer_box").stop(true).css("height","0");
            $("#secretary_box").animate({height:height},2000,"easeOutBounce");
            $("#secretary_box ul").fadeIn(2000);
            $("#general_box ul").css("display","none");
            $("#treasurer_box ul").css("display","none");
        });

    $("#treasurer_heading a")
        .hover(function(){
            $(this).css("border-bottom","4px solid rgb(0,0,200)");
            $("#secretary_heading a").css("border-bottom","4px solid white");
            $("#general_heading a").css("border-bottom","4px solid white");
        },function(){
            $(this).css("border-bottom","4px solid white");
        })
        .click(function(){
            $(this).css("border-bottom","4px solid rgb(0,0,200)");
            $("#secretary_heading a").css("border-bottom","4px solid white");
            $("#general_heading a").css("border-bottom","4px solid white");

            $("#general_box").stop(true).css("height","0");
            $("#secretary_box").stop(true).css("height","0");
            $("#treasurer_box").animate({height:height},2000,"easeOutBounce");
            $("#treasurer_box ul").fadeIn(2000);
            $("#secretary_box ul").css("display","none");
            $("#general_box ul").css("display","none");
        });
});

Answer 1

您可以使用jquery addClass（）函数提供活动和悬停类。然后简单地给这些clase的风格css。如果您的链接未激活，则可以使用removeClass（）函数删除类。

Answer 2

使用此代码 - DEMO

js -

$('li').on('click',function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

css -

li{
    float:left;
    list-style:none;
    padding: 3px 8px;
    background: #efefef;
    cursor: pointer;
}
li:hover, li.active{
    border-bottom: 2px solid #000;
    background: #ccc;
}

html -

<ul>
    <li>Hello</li>
    <li>Hi</li>
    <li>Hey</li>
    <li>Welcome</li>
</ul>

悬停功能 - 。在悬停和点击后制作边框底部

2 个答案: