CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chipe
Chipe

Reputation: 4801

How to remove and add class with if statement?

I am trying to have the classes change depending on what is clicked from the two headings.

If heading one is clicked, I want the font color to change to red and have it underlined with red, which in the class it currently does with a bottom border. If the other heading is clicked then I want that heading to take on the red characteristics. The one that is not clicked will just stay grey according to the no highlight class.

Here is the JSFiddle: http://jsfiddle.net/7ok991am/1/ I give an example look also of what I am trying to accomplish.

HTML:

<div id="page_headings">
    <h2 class="no_highlight">Heading One</h2>
    <h2 class="no_highlight">Heading Two</h2>
</div>

CSS:

#page_headings{
    overflow: hidden;
    margin-bottom: 32px;
}

#page_headings h2{
    float: left;
    margin-right:24px;
    font-size: 14px;
    cursor:pointer;
}

#page_headings h2:hover{
    font-weight: bold;
}

.red_highlight{
    color:red;
    border-bottom: 1px solid red;
}

.no_highlight{
    color:#898989;
}

JS:

$('#page_headings').on('click', function(){
    if($('#page_headings h2').hasClass('no_highlight')){
        $(this).removeClass('no_highlight').addClass('red_highlight');
    }else{
        $('#page_headings h2').addClass('no_highlight');
    };
});

Upvotes: 0

Views: 4963

Answers (4)

Lal
Lal

Reputation: 14810

Check this fiddle

JS

$('.no_highlight').on('click', function(){
    $(this).parent().find('.no_highlight').css('border-bottom','none');

    $(this).css('border-bottom','1px solid red');
});

The above method changes the border of the currently clicked headinh which i think is what you want.

AND

if you want addClass() and removeClass(), then see this fiddle

JS

$('.no_highlight').on('click', function(){
    $(this).parent().find('.no_highlight').removeClass('red_highlight');

    $(this).addClass('red_highlight');
});

This method adds a red_highlight class to the active link and removes the red_highlight when not active.

Please try it..

Upvotes: 0

Leeish
Leeish

Reputation: 5213

Building on @RDrazard I think you want them to switch between the two correct?

http://jsfiddle.net/7ok991am/3/

$('#page_headings h2').on('click', function(){
if($(this).hasClass('no_highlight')){
    $(this).removeClass('no_highlight').addClass('red_highlight');
}else{
    $(this).addClass('no_highlight');
}
$(this).siblings('h2').addClass('no_highlight');
});

Upvotes: 2

webNeat
webNeat

Reputation: 2828

Try this code 

$('#page_headings h2').on('click', function(){
  if($(this).hasClass('no_highlight')){
    $(this).removeClass('no_highlight').addClass('red_highlight');
  }else{
    $(this).addClass('no_highlight').removeClass('red_highlight');
  }
});

Upvotes: 0

WindsofTime
WindsofTime

Reputation: 611

JSFiddle: Link

First off, add a border-bottom property with none to the no highlight class to ensure that it looks just the same before the click.

Next, you want to the click event associated with the h2 elements, so it should be $('#page_headings h2')

Use this to impact the h2 we're clicking on.

Upvotes: 0

Related Questions