0

我有三项：将军、秘书和司库。我想这样当我将鼠标悬停在链接上时，文本下方会出现一个边框。但我也想让它在我点击它之后，边框仍然存在。点击后，如果我将鼠标悬停在另一个链接上，边框也应该出现（例如，我点击一般，那么红色边框应该保留；如果我然后将鼠标悬停在秘书上，红色边框会保留，但会出现绿色边框；如果我然后点击秘书，红色边框消失，绿色边框保留）

这是我的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");
        });
});
4

2 回答 2

0

您可以使用 jquery addClass() 函数提供活动和悬停类。然后简单地将 css 赋予这些 clasees 样式。如果您的链接未激活，您可以使用 removeClass() 函数删除类。

于 2013-07-26T11:53:17.970 回答
0

使用此代码 -演示

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>
于 2013-07-26T11:53:55.833 回答