如何使用if语句删除和添加类？

Question

我正在尝试根据从两个标题中点击的内容来更改课程。

如果单击标题1，我希望字体颜色更改为红色，并使用红色加下划线，这在类中当前使用底部边框。如果点击了另一个标题，那么我希望该标题采用红色特征。未点击的那个将根据无突出显示类保持灰色。

这是JSFiddle：http://jsfiddle.net/7ok991am/1/我举一个例子来看看我想要实现的目标。

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

Answer 1

在@RDrazard上构建我认为你希望他们在两者之间切换正确吗？

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

Answer 2

JSFiddle：Link

首先，将no-border-bottom属性添加到no highlight类，以确保它在单击之前看起来一样。

接下来，您想要与h2元素关联的click事件，因此它应该是$('#page_headings h2')

使用this影响我们点击的h2。

Answer 3

试试此代码

$('#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');
  }
});

Answer 4

检查此fiddle

<强> JS

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

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

上述方法会更改当前点击的headinh的边框，我认为这就是你想要的。

和

如果你想要addClass（）和removeClass（），那么看看这个fiddle

<强> JS

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

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

此方法将red_highlight类添加到活动链接，并在未激活时删除red_highlight。

请试试..