Web Publishing
  • WEB PUBLISHING
  • HTML5
    • HTML5란?
    • HTML5에서 추가된 것들
    • 테이블 - Checkbox Table
    • 테이블 - 상단고정
  • JavaScript ES6
    • 변수와 상수
    • 함수
  • Jquery
    • 연산자
    • Selecter
    • 기본효과
    • 페이딩
    • 슬라이딩
    • TAB
  • WAI-ARIA
    • WAI-ARIA
    • ROLE - Landmark
    • Aria - Live Region
    • Aria-관계
  • WAI-ARIA 컴포넌트(활용)
    • Error Message
Powered by GitBook
On this page

Was this helpful?

  1. Jquery

TAB

흔희쓰는 탭

<script>
	$(function(){
		var tab = $('._slide > li') , info = $('.currsec');

		var current = -1;
		tab.click(function(e){
			var t = e.currentTarget;
			var index = tab.index(t);
			if (current === index){
			 	return;
			 }

			current = index;
			tab.removeClass('on');
			$(t).addClass('on');

			info.hide();
			info.eq(current).fadeIn();
		});

		tab.eq(0).trigger('click'); //tab0번쩨에 click를 넣어
	});
</script>
		
				<ul class="_slide">
					<li><a href="#">TAB1</a><span class="line"></span></li>
					<li><a href="#">TAB2</a><span class="line"></span></li>
				</ul>						
				<div class="currsec"></div>
Previous슬라이딩NextWAI-ARIA

Last updated 4 years ago

Was this helpful?