效果描述：灰色字体是点击前的效果，红色字体是点击后的效果。
html代码：
<div class="top">
<div class="text1 red"></div>
<div class="text2"></div>
<div class="text3"></div>
<div class="text4"></div>
<div class="text5"></div>
</div>
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;
}··
