J-한솔넷

tab 안에 또다른 텝 표시 본문

웹 개발관련

tab 안에 또다른 텝 표시

jhansol 2013. 1. 18. 11:29

이것은 이전의 JQuery를 이용한 텝 표시 예제를 수정하여 텝 안에 또다른 탭을 표시하는 예제입니다.

예제가 약간 꾸질합니다.


그렇지만 이전 예제에 연속해서 보여줄 필요가 있어 일단 그대로 진행했습니다.


아래 내용은 이 것에 대한 예제입니다.


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

body { background-color: gray; }

.tab_board { width: 360px; height: 200px; margin: 0; padding: 0; border: 0px; background-color: white; }

.tab_board > div { width: 339px; height: 130px; margin: 0; padding: 10px; border: 1px solid black; background-color: yellow; }

.tab { margin: 0; padding: 0; }

.tab > li { display: inline-block; width:100px; padding: 10px; text-align: center; cursor: pointer; }

.select_tab { background-color: blue; color: white; }

.noselect_tab { background-color: white; color: black; }

.show_div { display: block; }

.hide_div { display: none; }


.tab_sub { width: 340px; margin: 0; padding: 0; border: 0px; background-color: white; }

.tab_sub > div { width: 340px; margin: 0; padding: 0; background-color: #aa9999; }

.sub_tab { margin: 0; padding: 0; }

.sub_tab > li { display: inline-block; padding: 10px; color:black; cursor: pointer; }

.sub_select_tab { background-color: #ecb76b; color: white; }

.sub_noselect_tab { background-color: white; color: black; }


</style>

<script src="jquery-1.8.3.min.js"></script>

<script>

function tab_select( parent_id, tab, tab_content ) {

$(parent_id + " li" ).addClass( "noselect_tab" ); // board 태그 안의 li 테그에 클래스를 noselect_tab 지정

tab.className = "select_tab"; // 선택된 태그의 클래스를 select_tab오로 지정하여 선퇵됨을 표시

$(parent_id + " div").hide(); // 내용이 나오는 모든 div 태그를 보이지 않게 함

$(tab_content ).show(); // 선택된 텝에 해당하는 div(tab_content) 만 표시되도록 설정

init_sub_tab( tab_content );

  }


function subtab_select ( parent_id, tab, tab_content ) {

$(parent_id + " li" ).addClass( "sub_noselect_tab" );

tab.className = "sub_select_tab";

$(parent_id + " div").hide();

$(tab_content ).show();

}

function init_sub_tab( tab_content ) {

$( tab_content + " >div" ).show();

$( tab_content + " li:first" ).addClass( "sub_select_tab" );

$( tab_content + "  .show_div" ).show();

}

</script>

</head>

<body>

<div id="board" class="tab_board">

<ul class="tab">

<li class="select_tab" onclick="tab_select( '#board', this, '#news' )">보도자료</li><li class="noselect_tab" onclick="tab_select( '#board', this, '#notice' )">공지사항</li><li class="noselect_tab" onclick="tab_select( '#board', this, '#faq' )">FAQ</li>

</ul>

<div id="news" class="show_div">

이곳은 보도자료가 표시되는 영역입니다.

</div>

<div id="notice" class="hide_div">

이곳은 공지사항이 표시되는 영역입니다.

<div id="sub_board" class="tab_sub">

<ul class="sub_tab">

<li class="sub_select_tab" onclick="subtab_select( '#sub_board', this, '#work')">업무공지</li><li class="sub_noselect_tab" onclick="subtab_select( '#sub_board', this, '#product')">제품관련</li>

</ul>

<div id="work" class="show_div">

업무공지 내용입니다.

</div>

<div id="product" class="hide_div">

제품관련 공지입니다.

</div>

</div>

</div>

<div id="faq" class="hide_div">

이곳은 질문과 답변이 이 표시되는 영역입니다.

</div>

</div>

</body>

</html>



위 예제와 이전 예제의 차이점은 공지 사항 부분에 새로운 텝을 표시하는 것과 이 텝의 모양을 지정하는 CSS, 그리고 이를 제어하기 위한 subtab_select, init_sub_tab 함수가 추가되었고 기존의 tab_select 함수에는 init_sub_tab 함수를 호출하여 내부의 탭을 보여지는 모양을 초기화하는 것이 추가 되었을 뿐입니다.


아래에는 html 문서만 올립니다



Noname1.html


jquery-1.8.3.min.js


저작자표시

'웹 개발관련' 카테고리의 다른 글

JSON 객체의 간단한 활용 예제  (0) 2013.01.18
JSON 개요  (0) 2013.01.18
웹 접근성 향상을 위한 국가 표준 기술 가이드 라인  (0) 2013.01.15
HTML5와 CSS를 이용한 로그인 박스  (0) 2012.12.15
JQuery를 이용해 tab 형식으로 내용 표시하기  (0) 2012.12.01
'웹 개발관련' Related Articles more