JAVA_EE/JQuery

[21.10.14] exam03(04_jQueryCSS) - 파일로드, 속성 추가, 속성 제거

luvforjunk 2021. 10. 14. 15:03
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

#container {
	width: 500px;
	margin: 20px auto;
}

ul.tab {
	list-style: none;
	position: relative;
	z-index: 100;
}

ul.tab li {
	width: 100px;
	height: 40px;
	float: left;
}

ul:after {
	content: '';
	display: block;
	float: none;
	clear: both;
}

ul.tab li a {
	background: url("../img/tab.jpg");
	display: block;
	color: #222;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}

ul.tab li a.selected {
	background: url("../img/tab_selected.jpg");
}

p.panel {
	border: 1px solid #9FB7D4;
	position: relative;
	padding: 10px;
	margin: 0;
	top: -1px;
	/* 
	top: -1px; ~을 잡아주면 HTML5아래의 선이 보이지 않게 된다
	어떤 파일이 선택되었는지 분별하기 위해 쓰인다
	 */
}
</style>
</head>
<body>
	<div id="container">
		<!-- 탭 버튼 영역 -->
		<ul class="tab">
			<li><a href="../txt/html5.txt" class="selected">HTML5</a></li>
			<li><a href="../txt/jquery.txt">jQuery</a></li>
			<li><a href="../txt/bootstrap.txt">Bootstrap3</a></li>
		</ul>
		<!-- 내용 영역 -->
		<p class="panel"></p>
	</div>

	<script type="text/javascript"
		src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('p.panel').load($('a.selected').attr('href'));

			$('ul.tab li a').click(function() {
				
				//클릭한 요소를 뺀 나머지에서 class="selected" 속성 제거
				$('ul.tab li a').not(this).removeClass('selected');

				//클릭한 요소에게 class="selected" 속성 추가
				$('this').addClass('selected');
				
				//클릭한 요소의 href 속성값을 가져와서 파일 로드
				$('p.panel').load($(this).attr('href'));
				
				//페이지 이동 방지
				return false;
			});
		});
	</script>
</body>
</html>

 

 

[결과]

 

728x90
반응형