티스토리 뷰

웹디자인

텝 클릭시 하단 이미지 변경되는 css

깽아네 2018. 12. 6. 17:52
728x90

 

텝을 클릭했을때 하단 이미지가 바뀌는 소스 알려드립니다.

 

<스크립트>

  1. <script>
  2. $(function () { 
  3.  tab('#tab',0); 
  4. });
  5. function tab(e, num){
  6.     var num = num || 0;
  7.     var menu = $(e).children();
  8.     var con = $(e+'_con').children();
  9.     var select = $(menu).eq(num);
  10.     var i = num;
  11.     select.addClass('on');
  12.     con.eq(num).show();
  13.     menu.click(function(){
  14.         if(select!==null){
  15.             select.removeClass("on");
  16.             con.eq(i).hide();
  17.         }
  18.         select = $(this); 
  19.         i = $(this).index();
  20.         select.addClass('on');
  21.         con.eq(i).show();
  22.     });
  23. }
  24. </script>

 

 

<CSS>

  1. ul,li { list-style:none; }
  2. a { text-decoration:none; color:#000; }
  3. .tab { height:100px; border-bottom:1px solid #555; background:#fff; overflow:hidden; }
  4. .tab li { float:left; width:50%; text-align:center; box-sizing:border-box; }
  5. .tab li { display:inline-block; cursor:pointer; }
  6. .tab li.on { color:red; border-bottom:2px solid red; }
  7. .tab_con { clear:both; margin-top:5px; border:1px solid #ddd; }
  8. .tab_con div { display:none; height:100px; line-height:100px; text-align:center; }
  9.  

<html>

  1.  <ul class="tab" id="tab">
  2.   <li>A</li>
  3.   <li>B</li>
  4.   <li>C</li>
  5. </ul>
  6. <div class="tab_con" id="tab_con">
  7.     <div>1st Contents</div> 
  8.     <div>2nd Contents</div>
  9.     <div>3rd Contents</div>
  10. </div>

 

 

 

 

 

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

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

슬라이드 자동이동 및 화살표 클릭시 옆으로 이동  (0) 2018.12.11
탭 클릭시 페이지 안에서 스크롤 이동되는 소스  (0) 2018.12.07
absolute 가운데 정렬하는 css  (0) 2018.12.06
마우스 오버시 이미지 확대 css팁  (0) 2018.11.29
드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)  (0) 2018.11.13