JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div class="tab-interface">
	 <!-- 탭 인덱스 -->
	 <ul class="tab-list" role="tablist">
		<li id="tab1" role="tab" aria-controls="section1" aria-selected="true" tabindex="0">HTML</li>
		<li id="tab2" role="tab" aria-controls="section2" aria-selected="false" tabindex="0">CSS</li>
		<li id="tab3" role="tab" aria-controls="section3" aria-selected="false" tabindex="0">Javascrip</li>
	 </ul>
	 <!-- 탭 콘텐츠 -->
	 <div class="tab-contents">
		<section id="section1" role="tabpanel" aria-labelledby="tab1">
			<p> HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지를 위한 마크업 언어이다.</p>
			<a href="#">상세 보기</a>
		</section>
		<section id="section2" class="unvisual" role="tabpanel" aria-labelledby="tab2">
			<p>캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. </p>
			<a href="#">상세 보기</a>
		</section>
		<section id="section3" class="unvisual" role="tabpanel" aria-labelledby="tab3">
			<p> 자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. </p>
			<a href="#">상세 보기</a>
		</section>
	</div>
</div>
<a href="#">copyright</a>

CSS

.tab-interface{
 width: 500px;
 }
 .tab-list{
 padding-left: 0;
 margin: 0;
 }
 .tab-list:after{
 display: block;
 clear: both;
 content: “”;
 }
 .tab-list li {
 float: left;
 list-style: none;
 }
 .tab-list li{
 display: block;
 background: #999;
 color: #fff;
 border: 2px solid #999;
 border-bottom: 0;
 padding: 10px;
 margin-right: 5px;
 border-radius: 10px 10px 0 0;
 text-decoration: none;
 position: relative;
 top: 2px;
 }
 [aria-selected=“true”]{
 background: #fff !important;
 color: #aaa !important;
 font-weight: bold;
 }
 .tab-contents{
 margin-top: 0;
 padding: 15px;
 border: 2px solid #aaa;
 z-index: 5;
 }
 .tab-contents h1{
 font-size: 1.3em;
 }
 .unvisual{
 display: none;
 }

JavaScript

$('[role="tab"]').keyup(function(e){
	var keyCode = e.keyCode || e.which;// 키보드 코드값
	if(keyCode == 39 || keyCode == 40){// 오른쪽방향키 이거나 // 아래쪽 방향키 // 브라우저의 기본 동작을 취소한다.
		e.preventDefault(); // 다음 tab 요소에 aria-selected=true로 지정하고 // 형제요소중에 자신 tab 이외의 나머지 tab 요소들을 // aria-selected=false로 지정한다.
		$(this).next().attr('aria-selected', true).siblings().attr('aria-selected', false);
		var selectedId = "#"+$(this).next().attr('aria-controls'); // 자신은 보이게하고 다른 tabpanel은 보이지 않게 지정한다.
		$(selectedId).removeClass('unvisual').siblings().addClass('unvisual'); // 다음요소로 포커스를 이동한다.
		$(this).next().focus(); // 마지막요소에서 오른쪽 방향키나 아래쪽 방향키를 눌렀을 경우
		if($(this).next().prevObject.attr('aria-controls')=='section3'){
			// tab, tabpanel, focus 모두 처음으로 이동
			$('#tab1').attr('aria-selected', true).siblings().attr('aria-selected', false);
			$('#section1').removeClass('unvisual').siblings().addClass('unvisual');
			$('#tab1').focus();
		}
	}
	if(keyCode == 37 || keyCode ==38){// 왼쪽방향키 이거나 // 위쪽 방향키
		e.preventDefault(); // 이전 tab 요소에 aria-selected=true로 지정하고 // 형제요소중에 자신 tab 이외의 나머지 tab 요소들을 // aria-selected=false로 지정한다.
		$(this).prev().attr('aria-selected', true).siblings().attr('aria-selected', false);
		var selectedId = "#"+$(this).prev().attr('aria-controls'); // 자신은 보이게하고 다른 tabpanel은 보이지 않게 지정한다.
		$(selectedId).removeClass('unvisual').siblings().addClass('unvisual'); // 이전요소로 포커스를 이동한다.
		$(this).prev().focus(); // 처음요소에서 왼쪽 방향키나 위쪽 방향키를 눌렀을 경우
		if($(this).prev().prevObject.attr('aria-controls')=='section1'){
			// tab, tabpanel, focus 모두 마지막으로 이동
			$('#tab3').attr('aria-selected', true).siblings().attr('aria-selected', false);
			$('#section3').removeClass('unvisual').siblings().addClass('unvisual');
			$('#tab3').focus();
		}
	}
	if(keyCode == 35){// end 키를 눌렀을 때
		e.preventDefault(); // tab, tabpanel, focus 모두 마지막으로 이동
		$('#tab3').attr('aria-selected', true).siblings().attr('aria-selected',...