CODEWITHSUNDEEP
javascriptjqueryhtmladdclass
David Passmore
David Passmore

Reputation: 6099

jQuery .addClass not executing on $(this)

I am trying to change a list item when the user clicks the selected class is changed to the clicked item. I have this code:

$(function() {
    $("a.product-page li").click(function(){
        $(this).parent("a").addClass("selected-page");
        $("#options a.selected-page").removeClass("selected-page");
    });
});

However the removeClass works however the addClass does not.

Here is the Site.

HTML:

<ul id="options">
    <a href="#summary" id="summary" class="product-page selected-page"><span></span><li>Summary</li></a>
    <a href="#specs" id="specs" class="product-page"><span></span><li>Specs</li></a>
    <a href="#media" id="media" class="product-page"><span></span><li>Media</li></a>
    <a href="#reviews" id="review" class="product-page"><span></span><li>Reviews</li></a>
</ul>

CSS:

ul#options {
    margin-left:0px;
}

ul#options li{
    list-style:none;
    padding: 10px 20px;
    background: #CCC;
    border-top: 1px #999 solid;
    border-left: 1px #999 solid;
    border-right: 1px #999 solid;
}

ul#options a{
    display:block;
    border:none !important;
}

ul#options a.selected-page span{
    position:absolute;
    width:0px;
    height:0px;
    border-width:10px;
    border-color:transparent #999999 transparent transparent;
    border-style:solid;
    margin-left:270px;
    margin-top:11px;
}

ul#options a:last-child li {
    border-bottom:1px #999 solid;
}

Upvotes: 0

Views: 147

Answers (4)

DRobertE
DRobertE

Reputation: 3508

Reverse the lines

    $(this).parent("a").addClass("selected-page");
    $("#options a.selected-page").removeClass("selected-page");

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

  • You should wrap <a> link tag inside li tag like below,

HTML:

<ul id="options">
    <li><a href="#summary" id="summary" class="product-page selected-page"><span></span>Summary</a></li>
    <li><a href="#specs" id="specs" class="product-page"><span></span>Specs</a></li>
    <li><a href="#media" id="media" class="product-page"><span></span>Media</a></li>
    <li><a href="#reviews" id="review" class="product-page"><span></span>Reviews</a></li>
</ul>
  • You are removing the class that you just added. You can move the remove class above the addclass or just use not to exclude this when you remove..

Code:

$(function() {
    $("a.product-page", $('#options')).click(function(){
        $(this).addClass("selected-page");
        $("#options a.selected-page").not(this).removeClass("selected-page");            
    });
});

Upvotes: 2

Renato Lochetti
Renato Lochetti

Reputation: 4568

You are adding the class and then removing in the next line.

The order here

$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");

is incorrect.

Upvotes: 2

I Hate Lazy
I Hate Lazy

Reputation: 48761

It's because you're immediately removing the class. Flip those two lines around, and it'll work.

$(function() {
    $("a.product-page li").click(function(){
        $("#options a.selected-page").removeClass("selected-page");
        $(this).parent("a").addClass("selected-page");
    });
});

As noted in a comment above, your HTML is terribly malformed as well. That will need to be fixed.

Upvotes: 7

Related Questions