实现功能说明：
如下图，点击不同的文字能够切换不同的页面，同时这个tab的文字能够相应的变色，其他未选中的状态默认为灰色。

方案一：
使用css的伪类。
:active，元素被点击时变色，但颜色在点击后消失
:focus， 元素被点击后变色，且颜色在点击后不消失

	.classone{//默认颜色color为灰色，当然你也可以在这里写其他颜色以及位置的设置。}.classone:active {color: rgba(61, 58, 58, 0.98);}.classone:focus {color:  rgba(61, 58, 58, 0.98);}

如果我们只是简单的加上伪类，由于div等元素无法接受键盘或其他用户事件，即不支持:focus伪类，可通过增加tabIndex属性使其支持:focus。
即在相应的html里面加上一个属性tabindex

 基本信息

加上一个click后就会，点击后就是调用伪类的方法。如果在vue里面click没反应，可以改成click.native。

延展：
什么是伪类？
伪类用于定义元素的特殊状态。是一种特殊的类，它表示的元素的一种状态，不是固定某一个
常见的伪类选择器。
如：

//悬停在 div 上, 
 元素上使用 :hover 伪类的实例：
div:hover {background-color: blue;
}//:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
p i:first-child {color: blue; //匹配所有 
 元素中的首个  元素
}
p:first-child i {color: blue;    //匹配所有首个 
 元素中的所有  元素
}//:lang 伪类允许您为不同的语言定义特殊的规则。




Some text A quote in a paragraph Some text.

//在html里面写上一个id,以及：class

上传文件//利用id写常规的设置
#ClassThree{margin-left: 88px;width: 100px}
//当变量isThree为真时，会渲染下面的样式
.ClassThree_color{color: rgba(0, 84, 254, 1);}//在js里
Three(){
this.isThree=true;
}