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

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

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;

}··