jQuery에서 css변경 방법(클릭시 내용/색/스타일)

jQuery에서 css변경 방법(클릭시 내용/색/스타일)

jquery를 사용하여 css에 접근후 원하는 내용/색/스타일을 변경 한다.

<div class="btn">
    <div id="b1">t1버튼1</div>
    <div id="b2">t2버튼</div>
    <div id="b3">t3버튼</div>
    <div id="b4">t4버튼</div>
 </div>
 <div class="tab">
     <div id="t1" style="display: block;">1</div>
     <div id="t2">2</div>
     <div id="t3">3</div>
     <div id="t4">4</div>
 </div>

-html 구성

-연습을위해 작성 사용에따라 변경가능

 

<script type="text/javascript">
	$(function() {
		$('#b1').click(function() {
			$('#t1').show().siblings('div').hide();
		})
	});
	$(function() {
		$('#b2').click(function() {
			$('#t2').show().siblings('div').hide();
		})
	});
	$(function() {
		$('#b3').click(function() {
			$('#t3').show().siblings('div').hide();
		})
	});
	$(function() {
		$('#b4').click(function() {
			$('#t4').show().siblings('div').hide();
		})
	});
</script>

-jQuery에서 css설정

-클릭 이벤트로 클릭한 부분의 div의 #t1은 보여주고 다른 div 형제들은 숨긴다.

<style type="text/css">
.btn div {
	display: inline-block;
}

.tab div {
	display: none;
}
</style>

-css에서는 이러한 설정을 해준다.

-가장 중요한것은 jQuery를 인포트하고 사용해야한다.