J-한솔넷

JQuery를 이용해 tab 형식으로 내용 표시하기 본문

웹 개발관련

JQuery를 이용해 tab 형식으로 내용 표시하기

jhansol 2012. 12. 1. 14:18

앞의 소스를  JQuery를 이용하여 코드를 수정해봤습니다. 자바스크립트의 코드가 매우 간단해지는군요. 현재까지 자바스크립트로 필요한 기능을 제가 직접 구현하여 사용는데 문제거 없어 관심을 두지 않았는데, 코딩이 너무 편합니다. ^^


아래 코드는 앞의 코드에서 자바스크립트 부분과 이를 호출하는 부분만 바꾸었습니다. 소스 아래에 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; }

</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) 만 표시되도록 설정

}

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



jquery-1.8.3.min.js


Noname1.html


저작자표시

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

웹 접근성 향상을 위한 국가 표준 기술 가이드 라인  (0) 2013.01.15
HTML5와 CSS를 이용한 로그인 박스  (0) 2012.12.15
Tab 형태로 내용 표시하기  (0) 2012.11.24
#H3 개발자 컨퍼런스 2012의 자료집을 PDF로 공개합니다  (0) 2012.11.15
flash 수업 자료  (0) 2012.11.03
'웹 개발관련' Related Articles more