텝 클릭시 배경색 변경되는 소스

 

 

See the Pen bzVQqj by Eun Kyoung Cho (@eun-kyoung-cho) on CodePen.

위의 결과물처럼 a링크 박스를 클릭시 해당 박스 배경색이 변경되는 텝구조 형식입니다.

 

 

html

 

  <div class="car_sort">
      <div class="car_th"><a href="#" tabindex="1">1</a></div><div class="car_th"><a href="#" tabindex="2">2</a></div><div class="car_th"><a href="#" tabindex="3">3</a></div>
    </div>

 

 

 

css

 

.car_sort {overflow:hidden; margin:0 auto;}
.car_th {float:left; width:30%; height:50px; line-height:50px; margin:0 5px; background:#f7f7f7; text-align:center; display:block; color:#363636; font-weight:400; font-size:20px;}
.car_th a:link,.car_th a:visited{color:#363636; background:#f7f7f7; display:block;}
.car_th a:hover,.car_th a:active{background:#ea4646; color:#fff; display:block;}
.car_th a:focus {background:#ea4646; color:#fff; display:block;}