웹접근성에 맞는 탭메뉴

html

<div class="tab">
                <ul>
                  <li class="active">
                    <a href="#" class="tab_menu">메뉴1</a>
                    <div class="tab_cont">
                      <a href="#" class="btn_more">더보기</a>
                      <ul class="list">
                        <li><a href="#">1리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#" class="tab_menu">메뉴2</a>
                    <div class="tab_cont">
                      <a href="#" class="btn_more">더보기</a>
                      <ul class="list">
                        <li><a href="#">2리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <a href="#" class="tab_menu">메뉴3</a>
                    <div class="tab_cont">
                      <a href="#" class="btn_more">더보기</a>
                      <ul class="list">
                        <li><a href="#">3리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                        <li><a href="#">리스트 내용</a></li>
                      </ul>
                    </div>
                  </li>                 
                </ul>
              </div>

 

 

css

/* tab */
.tab{width: 100%;}
.tab>ul{position: relative;}
.tab>ul:after{content:"";display:block;clear:both}
.tab>ul>li{float: left;}
.tab_cont{position: absolute; width: 100%; top: 0; left: 0;}
.tab .tab_menu{position: relative; z-index: 99;}
/* 그 외 스타일은 자유롭게 */

 

 

javascript

 

// tab
$(document).ready(function () {
	var $tab_list = $('.tab');
	$tab_list.find('.tab_cont').hide();
	$tab_list.find('li.active>.tab_cont').show();
	$tab_list.each(function(){
		var $this = $(this);
		$this.height($this.find('li.active>.tab_cont').height()); // tab_cont가 absolute로 띄워져 있으므로 tab이 height값을 가지지 못함. active된 li의 tab_cont height값으로 강제 지정
	});
  function tabtoggle(){
    var $this = $(this);
    $this.siblings('.tab_cont').show();
    $this.parent('li').addClass('active');
    $this.parent('li').siblings('li').removeClass('active');
    $this.parent('li').siblings('li').children(".tab_cont").hide();
    return false;
  }
  $tab_list.find('.tab_menu').click(tabtoggle).focus(tabtoggle);
});

 

 

참고 : http://jsfiddle.net/chunyong/5kd8nkyg/