一、tab栏切换
1.点击界面中按钮,将当前被点击的按钮的背景颜色变为gold色,其他的按钮恢复默认。
2、当点击按钮的时候,需要将这个按钮对应位置的div显示出来
-
提示
1.让按钮背景颜色变为gold色只需要给按钮的class增加active即可
2.让div显示出来,只需要将div的class增加current即可
3.如何利用自定义属性降按钮与下方盒子建立联系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab_con {
width: 500px;
height: 350px;
margin: 50px auto 0;
}
.tab_btns {
height: 50px;
}
.tab_btns input {
width: 100px;
height: 50px;
background: #ddd;
border: 0px;
outline: none;
}
.tab_btns .active {
background: gold;
}
.tab_cons {
height: 300px;
background: gold;
}
.tab_cons div {
height: 300px;
line-heig