Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

The stream of consciousness

[Jquery]AJAX로 탭메뉴 구현하기 본문

IT

[Jquery]AJAX로 탭메뉴 구현하기

인터넷실명제 2018. 8. 6. 11:03

텝 메뉴 구현할 일이 생겨 구글링 해본 결과 예제코드는 넘쳐났다.


하지만 메뉴마다 다른 파일로 관리하는 방법은 나와있지 않아 올린다.


기본적인 jquery 문법 등은 생략한다.




home.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
#container {
	width: 960px;
	margin: 0 auto;
	text-align: center;
}
.tab {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#tabcontent {
	display: block;
	background-color: green;
	padding: 6px 12px;
	color: #fff;
}
a{
	display: inline-block;
	color: #000;
	text-align: center;
	text-decoration: none;
	padding: 14px 16px;
	font-size: 17px;
	transition: 0.3s;
}
a:visited { 
	color: black; 
	text-decoration: none;
	
	}


li {
	float: left;
	display: inline-block;
	color: #000;
	text-align: center;
	text-decoration: none;
	padding: 14px 16px;
	font-size: 17px;
}
}
</style>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
	$(function() {
		// tab operation
		$('.tabmenu').click(function() {
			var activeTab = $(this).attr('data-tab');
			$('li').css('background-color', 'white');
			$(this).css('background-color', 'green');
			$.ajax({
				type : 'GET',                 //get방식으로 통신
				url : activeTab + ".html",    //탭의 data-tab속성의 값으로 된 html파일로 통신
				dataType : "html",            //html형식으로 값 읽기
				error : function() {          //통신 실패시
					alert('통신실패!');
				},
				success : function(data) {    //통신 성공시 탭 내용담는 div를 읽어들인 값으로 채운다.
					$('#tabcontent').html(data);
				}
			});
		});
		$('#default').click();          
	});
</script>
</head>
<body>
<div id="container">
		<ul class="tab">
			<li data-tab="tab1" class='tabmenu' id="default"><a href="#">TabExample1</a></li>
			<li data-tab="tab2" class='tabmenu'><a href="#">TabExample2</a></li>
			<li data-tab="tab3" class='tabmenu'><a href="#">TabExample3</a></li>
		</ul>
		<div id="tabcontent"></div>
	</div>
</body>
</html>


tab1.html

<h1> First tab</h1>
<div> This is tab1.html</div>


tab2.html

<h1 style="color : red">Second Tab</h1>
input here some code


tab3.html

<h1> The Last Tab</h1>
<p>if you want more tab, just add</p>







'IT' 카테고리의 다른 글

[JAVA] 특정 폴더 하위 자바 버전 찾기  (0) 2018.08.08
'IT' Related Articles more
Comments