접근성 탭

<style>
.__tab {font-size:0;width:30%;position:relative;height:150px;}
.__tab:before {content:"";display:block;position:absolute;left:0;top:29px;width:100%;height:1px;background:#ddd;}
.__tab .box {display:inline-block;vertical-align:top;}
.__tab .box .tab {background:#f3f3f3;border:1px solid #ddd;color:#888;font-size:14px;padding:0 15px;height:30px;line-height:28px;margin-left:-1px;box-sizing:border-box;position:relative;display:inline-block;}
.__tab .box:first-child .tab {margin-left:0;}
.__tab .box .area {display:none;}
.__tab .box .area .more {display:block;position:absolute;right:0;top:0;font-size:14px;border:1px solid #ddd;width:20px;height:20px;line-height:20px;text-align:center;}
.__tab .box .area .list {position:absolute;left:0;top:40px;width:100%;}
.__tab .box .area .list li {margin-top:3px;}
.__tab .box .area .list li:first-child {margin-top:0;}
.__tab .box .area .list li a {display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:13px;color:#777;position:relative;padding-left:8px;}
.__tab .box .area .list li a:before {content:"";display:block;width:2px;height:2px;background:#777;position:absolute;left:0;top:50%;margin-top:-1px;}
.__tab .box.active .tab {border-color:#000;color:#000;background:#fff;z-index:10;border-bottom:none;}
.__tab .box.active .area {display:block;}
</style>

<div class="__tab">
	<!-- 1번 탭 -->
	<div class="box active">
		<a href="#" class="tab"><span>탭메뉴1</span></a>
		<div class="area">
			<ul class="list">
				<li><a href="#">탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용</a></li>
				<li><a href="#">탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용</a></li>
				<li><a href="#">탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용</a></li>
				<li><a href="#">탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용</a></li>
				<li><a href="#">탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용 탭메뉴1번 내용</a></li>
			</ul>
			<a href="#" class="more"><i class="axi axi-plus"></i></a>
		</div>
	</div>
	<!-- //1번 탭 -->

	<!-- 2번 탭 -->
	<div class="box">
		<a href="#" class="tab"><span>탭메뉴2</span></a>
		<div class="area">
			<div class="list">
				<li><a href="#">탭메뉴2번 내용</a></li>
				<li><a href="#">탭메뉴2번 내용</a></li>
				<li><a href="#">탭메뉴2번 내용</a></li>
				<li><a href="#">탭메뉴2번 내용</a></li>
				<li><a href="#">탭메뉴2번 내용</a></li>
			</div>
			<a href="#" class="more"><i class="axi axi-plus"></i></a>
		</div>
	</div>
	<!-- //2번 탭 -->
</div>

<script>
$('.__tab .tab').on('click',function(){
	$(this).closest('.box').addClass('active').siblings().removeClass('active');
	return false;
});
</script>