jquery的tab切換
阿新 • • 發佈:2018-12-20
.tab{
display: flex;
justify-content: center;
}
.tab li{
list-style: none;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid gray;
color: #fff;
background: skyblue;
}
.tab li:hover{
cursor: pointer;
}
.content{
width: 800px;
height: 500px;
border: 1px solid red;
text-align: center;
margin: auto;
}
.hide{
display: none;
}
/*選中時li的顏色加深,淺藍變為藍*/
.active{
background: blue!important;
/*因為li本身就有背景顏色,這裡加!important提高背景顏色的優先權。預設開啟第一個li的選中的狀態*/
}