J-한솔넷

Tab 형태로 내용 표시하기 본문

웹 개발관련

Tab 형태로 내용 표시하기

jhansol 2012. 11. 24. 15:28

이긋은 공지사항 및 기타 내용을 텝 형태로 표시하는 HTML 에 입니다. 수강생 중 한명이 이 것으로 인해 고민하고 있어 한번 만들어 봤습니다. 책에도 이와 같은 내용이 잇지만 학생들이 내용을 이해하기에는 너무나 많은 기교가 들어 있어 오히려 어렵게 느껴지는 원인이 되었습니다.


문서는 html5 의 형식을 취했어나 코드만으로 봤을 때는 html 4.0, xhtml 어디서나 사용 가능합니다.

아직 CSS3는 브라우즈 마다 지원하는 것이 달라 공통으로 적용하기에는 무리가 있어 CSS2와 javㅁscript를 조금 활용하였습니다. 그리고 본 내용은 CSS, Javascript 등의 내용이 html 문서에 포함되어 있지만 이 방법은 좋은 것은 아닙니다. 그렇지만 이해를 돕기 위해 한 문서에 기록했습니다.



<!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; }

</style>

<script>

function tab_select( parent_id, tab, tab_content ) {

parent_obj = document.getElementById(parent_id );

var entries = parent_obj.getElementsByTagName( "li" );

for( i in entries ) {

if( tab ==  entries[i]) tab.className = "select_tab";

else entries[i].className = "noselect_tab";

}

content = document.getElementById( tab_content );

entries = parent_obj.getElementsByTagName( "div" );

for( i in entries ) {

if( content == entries[i] ) content.className = "show_div";

else entries[i].className = "hide_div";

}

}

</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>

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

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

</div>

</div>

</body>

</html>




Noname1.html



저작자표시

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

HTML5와 CSS를 이용한 로그인 박스  (0) 2012.12.15
JQuery를 이용해 tab 형식으로 내용 표시하기  (0) 2012.12.01
#H3 개발자 컨퍼런스 2012의 자료집을 PDF로 공개합니다  (0) 2012.11.15
flash 수업 자료  (0) 2012.11.03
네이버 개발자센터에서 공개한 디자인스튜디오 2.0입니다.  (0) 2012.10.23
'웹 개발관련' Related Articles more