📝 jQuery
🖥️ 1. not() 함수
1-1. this 용법
- 여러개의 요소를 의미하는 CSS 셀렉터를 사용하여 이벤트를 정의한 경우 대상 요소들은 모두 동일한 이벤트를 발생시킬 수 있다.
- 이때
$(this)는 현재 이벤트가 발생한 단 하나의 요소를 가리킨다.
1-2. this를 부정하는 not(this)
$("요소") 객체의 not(this) 함수는 여러 HTML 요소들 중 이벤트가 발생한 자신을 제외한 나머지 객체들을 가리킨다.
1-3. not() 함수의 기능
'~ 중에서 ~은 제외' 라는 의미
- this 키워드에 대해서뿐만 아니라 다른 jQuery 객체나 다른 객체를 지정하기 위한 selector에 대해서도 적용할 수 있다.
$(".btn").not($("#mybtn")).css(...);
$(".btn").not(".btn:eq(2)").css(...);
📝 예제
EX)
<head>
...
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
/** 기본 초기화 */
* { padding: 0; margin: 0; }
ul { list-style: none;}
.pull-left { float: left; }
.clearfix:after { content: ''; display: block;
float: none; clear: both; }
.hide { display: none; }
/** 탭 박스의 기본 크기와 중앙 정렬 및 상하 여백 */
.tab { width: 500px; margin: 20px auto; }
/** 개별 버튼에 대한 기본 크기와 가로 정렬 */
.tab-button-item { width: 100px; height: 40px; }
/** 현재 활성 탭의 배경 이미지 별도 처리 */
.tab-button-item-link.selected {
background: url("img/tab_selected.jpg"); }
/** 탭 버튼의 기본 배경 처리와 글자 형태 처리 */
.tab-button-item-link {
background: url("img/tab.jpg");
display: block;
color: #222;
line-height: 40px;
text-align: center;
text-decoration: none;
}
/** 내용영역의 태두리처리 및 상단으로 -1px 이동시킴.
* 버튼 영역과 1px 겹치게 처리해서 활성 탭이 뚫려 있는 효과 연출 */
.tab-panel {
border: 1px solid #9FB7D4;
position: relative;
top: -1px;
padding: 20px 10px;
}
/** 탭 버튼의 초기화 및 레이어 띄우기 > 내용영역과 1px 겹쳐져야 한다. */
.tab-button {
position: relative;
z-index: 10;
}
</style>
</head>
<body>
<!-- 탭의 전체 박스 -->
<div class="tab">
<!-- 탭 버튼 영역 -->
<ul class="tab-button clearfix">
<li class="tab-button-item pull-left">
<a class="tab-button-item-link selected"
href="#tab-page-1">HTML5</a>
</li>
<li class="tab-button-item pull-left">
<a class="tab-button-item-link" href="#tab-page-2">jQuery</a>
</li>
<li class="tab-button-item pull-left">
<a class="tab-button-item-link" href="#tab-page-3">Bootstrap3</a>
</li>
</ul>
<!-- 내용영역 -->
<div class="tab-panel">
<div id="tab-page-1"><h3>탭 페이지 1</h3></div>
<div id="tab-page-2" class="hide"><h3>탭 페이지 2</h3></div>
<div id="tab-page-3" class="hide"><h3>탭 페이지 3</h3></div>
<div>
</div>
<script type="text/javascript">
// 탭 버튼 클릭 처리
$(".tab-button-item-link").click(function(e){
// 이벤트 객체가 필요함
// 페이지 이동 방지
e.preventDefault();
// 클릭된 요소를 제외한 나머지에게 selected 클래스를 제거
$(".tab-button-item-link").not(this).removeClass("selected");
// 클릭된 요소에게 selected 클래스 적용
$(this).addClass("selected");
let target = $(this).attr("href");
$(target).removeClass('hide');
$(".tab-panel > div").not( $(target) ).addClass('hide');
});
</script>
</body>