jQuery 不会在单击时更改 border-right 属性

Question

我正在开发一个简单的应用程序，它会在单击对象时更改对象的边框。

JavaScript

$('.tab').click(function(event) {
    $('tab-active:first').css('border-right', '1px solid black');
    $(event.target).addClass('tab-active');
});

Jade

html
head
    title=title
    link(rel="stylesheet" type="text/css" href="../style.css")
    //- link(rel="stylesheet" type="text/css" href="../bootstrap.min.css")
    //- link(rel="stylesheet" type="text/css" href="../bootstrap-theme.css")
    script(src="../jquery-2.1.3.min.js")
    script(src="../underscore-min.js")
    script(src="../backbone-min.js")
    script(src="../application.js")
body
    .main
        div(class="tab tab-active top")
        div(class="tab")
        div(class="tab")
        div(class="tab")

CSS

.main {
    width: 80vw;
    height: 80vh;
    background-color: #DDDDDD;
    margin-right: 10vw;
    margin-left: 10vw;
    margin-top: 10vh;
    margin-bottom: 10vh;
    float: left;
    border: 1.5px solid black;
}

.tab {
    color: #DDDDDD;
    border: 1px solid black;
    border-left: none;
    display: block;
    height: 25%;
    width: 13%;
}

.tab-active {
    border-right: none;
}

.tab:hover {
    background-color: #CCCCCC;
    border: .5px solid black;
}

.top {
    border-top: none;
}

当我单击一个选项卡时，它会带走被单击对象的右边框，但不会将其返回到带有 tab-active 的前一个选项卡。我做错了什么？

Answer 1

您的选择器有误。要选择一个类，您需要使用 ..

 $('.tab-active:first').css('border-right', '1px solid black');