笔记|原生HTML，CSS，JS实现tab栏切换效果 javascript|html|css|css

核心原理：排他思想，把所有的相同样式清除，留下自己
直接上代码
HTML

水果

蔬菜

饮料

肉

水果内容
蔬菜内容
饮料内容
肉内容

css

* {
margin: 0;
padding: 0;
list-style: none;
}

.tab_list>ul {
width: 500px;
display: flex;
}

.tab_list>ul>li {
width: 100px;
height: 50px;
font-size: 15px;
background-color: #ddd;
line-height: 50px;
text-align: center;
margin-right: 30px;
transition: all .4s;

}

.tab_list>ul>li.current {
background-color: #409EFF;
color: #fff;
}

.tab_con>.item {
width: 500px;
height: 120px;
border-top: 1px solid #000;
margin-top: 10px;
display: none;
}