티스토리 뷰

웹디자인

탭 클릭시 페이지 안에서 스크롤 이동되는 소스

깽아네 2018. 12. 7. 15:48
728x90

안녕하세요. 오늘은 탭 클릭시 페이지 안에서 스크롤이 이동되는 소스를 알아보고자 합니다.

 

<html>

 

  1. <div class="tab_devel">
  2.     <ul>
  3.         <li class="contact"><a href="#pay01" class="btn">1</a></li>
  4.         <li><a href="#pay02" class="btn">2</a></li>
  5.      </ul>
  6. </div>
  7.     <div id="pay01"></div>
  8.     <div>1</div>
  10.      <div id="pay02"></div>
  11.      <div>2</div>

 

 

id = 값을 맞추어주면 그 위치로 스크롤이 이동된다.

 

<css>

 

  1. .tab_devel {width:100%; border-bottom:1px solid #e0e0e0; overflow:hidden;}
  2. .tab_devel ul {width:1200px; margin:0 auto; line-height:96px;}
  3. .tab_devel ul li {float:left; width:50%; font-weight:bold; font-size:24px; text-align:center; box-sizing: border-box; cursor: pointer;}
  4. .tab_devel ul li.contact {color:#e0e0e0; border-bottom:2px solid #ed1c24;}
  5. .tab_devel ul li:hover {border-bottom:2px solid #ed1c24;}

 

 

2018/12/06 - [웹디자인] - absolute 가운데 정렬하는 css

2018/11/13 - [웹디자인] - 드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)

2018/12/06 - [웹디자인] - 텝 클릭시 하단 이미지 변경되는 css

 

 

 

728x90
저작자표시 비영리 동일조건

'웹디자인' 카테고리의 다른 글

이미지 클릭시 큰 이미지 팝업 뜨면서 보이도록 하는 소스  (0) 2018.12.12
슬라이드 자동이동 및 화살표 클릭시 옆으로 이동  (0) 2018.12.11
텝 클릭시 하단 이미지 변경되는 css  (0) 2018.12.06
absolute 가운데 정렬하는 css  (0) 2018.12.06
마우스 오버시 이미지 확대 css팁  (0) 2018.11.29