html点击后的效果,（jquery）导航栏实现点击后的效果

效果描述：灰色字体是点击前的效果，红色字体是点击后的效果。

html代码：

js代码：

$('.top div').on('click',function(){

$(this).addClass("red").siblings('.top div').removeClass("red") //定位到点击的标签后，为其增加css样式，同时兄弟元素删除原来的样式

})

css代码：.

top{

width: 100%;

height: 0.38rem;

}

.top div{

font-size: 0.12rem;

width: 0.53rem;

margin: 0.11rem;

float: left;

}

.red{

font-size: 0.12rem;

width: 0.53rem;

margin: 0.11rem;

float: left;

color: red;

font-weight: bold;

border-bottom: 2px solid red;

}··