CODEWITHSUNDEEP
jquerycss
James Parsons
James Parsons

Reputation: 6057

jQuery does not change border-right attribute on click

I am working on a simple application that will change the border of objects when they are clicked.

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;
}

When I click a tab, it takes away the right border on the clciked object, but it does not give it back to the previous tab with tab-active. What am I doing wrong?

Upvotes: 0

Views: 1332

Answers (1)

Ozan
Ozan

Reputation: 3739

Your selector is wrong. To select a class you need to use ..

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

Upvotes: 5

Related Questions