jquery tabs 긴거

it/jQuery 2014. 8. 21. 16:46 Posted by 하얀나다

<!DOCTYPE html>

<html>

<head>

<meta charset="euc-kr" />

<title>jQuery test</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />

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

<script src="jquery/jquery.js"></script>

</head>

<body>


<div class="all">


<div class="tabSet">

<ul class="tabs">

<li><a href="#panel1-1" class="on">첫번째</a></li>

<li><a href="#panel1-2">두번째</a></li>

<li><a href="#panel1-3">세번째</a></li>

<li><a href="#panel1-4">네번째</a></li>

</ul>

<div class="panels">

<div class="panel" id="panel1-1">Like all great travellers, I have seen more than I remember,and remember more than I have seen. 훌륭한 여행가들이 흔히 그렇듯이 나는 내가 기억하는 것보다 많은 것을 보았고 또한 본 것보다 많은 것을 기억한다. Benjamin Disraeli(벤자민 디즈렐리)[영국 정치인/작가, 1804-81]

 </div>

<div class="panel" id="panel1-2">Anything you're good at contributes to happiness. 당신이 잘 하는 일이라면 무엇이나 행복에 도움이 된다. Bertrand Russell(버트랜드 러셀)[英 철학자, 1872-1970]

 </div>

<div class="panel" id="panel1-3">The computer is only a fast idiot; it has no imagination; it cannot originate action. It is, and will remain, only a tool of man. 컴퓨터는 민첩한 바보이다, 상상력도 없고 스스로 행동할 수도 없다. 현재에도 미래에도 컴퓨터는 단지 인간의 도구일 뿐이다. American Library Association's 1964 statement about the Univac (미국도서관협회의 Univac[전자계산기 상품명]에 관한 1964년도 성명서)

 </div>

<div class="panel" id="panel1-4">Business? It's quite simple. It's other people's money. 사업? 그건 아주! 간단하다. 다른 사람들의 돈이다. Alexandre Dumas(알렉산드르 듀마)  </div>

<!-- /panels --></div>

<!-- /tabset --></div>

</div>


</body>

</html>





$(function() {
// 0. 탭이 여러개가 있는 경우
$('.tabSet').each(function() {
// 해당탭메뉴를 변수로 지정

var topDiv = $(this);
// a 요소를 찾아 변수로 지정
// topDiv.find('ul > li > a');
var anchors = topDiv.find('ul.tabs a');
// div요소중에서 클래스로 panel 지정한 것들 찾아 변수 지정
var panelDivs = topDiv.find('div.panel');
//맨 첫번째 a / panel 을 저장
var lastAnchor = anchors.filter('.on');
var lastPanel = $(lastAnchor.attr('href'));
//a요소를 보여준다
anchors.show();
//div 요소는 모두 감추기
panelDivs.hide();
lastPanel.show();
//a태그에서 클릭 이벤트 발생시
anchors.click(function(){
event.preventDefault(); // a 태그의 기본 속성 제거
var currAnchor = $(this);
var currPanel = $(currAnchor.attr('href'));
lastAnchor.removeClass('on');
currAnchor.addClass('on');
lastPanel.hide();
currPanel.show();
lastAnchor = currAnchor;
lastPanel = currPanel;
});
})
});


저작자표시

'it > jQuery' 카테고리의 다른 글

JQuery 올체크 올해제  (0) 2014.08.22
글자 추가하고 터치하면 색변화, 그후 글추가하면 하위<li> 로  (0) 2014.08.21
jquery tabs  (0) 2014.08.21
마우스오버 됫을때 그림이 바껴 신기신기  (0) 2014.08.21
새창링크  (0) 2014.08.21
 

티스토리툴바