<body>
<div id ="wrap">
<ul class = "btns">
<li><a class="on" href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<div class = "obj">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</div>
</body>
--------------------------------------------
$(function(){
$(".btns li").on("click",function(e){
e.preventDefault();
var i = $(this).index();
//alert(i);
$(".btns li a").removeClass("on");
$(".btns li").eq(i).children("a").addClass("on");
});
});
e.preventDefault();
- 이벤트의 기본기능을 막는 것으로 생각하면 된다.
위 소스를 예로 들면 클릭했을때 href로 설정되어있는 주소로 바로 이동하는 것이 아니라
e.preventDefault(); 로 우선 이벤트를 멈춘 후 js의 소스의 기능을 먼저 따른다.
728x90
반응형
'Front-end > JQuery' 카테고리의 다른 글
| [Jquery] Sortable 라이브러리 사용하여 리스트 드래그 앤 드롭 만들기 (0) | 2022.11.02 |
|---|---|
| [JQuery] 엔터키 이벤트 실행 (엔터키 안누르고) (0) | 2022.09.21 |
| [jQuery]이벤트의 연결 및 처리 .on() .off() .one() (0) | 2021.12.23 |
| [jQuery/AJAX ] Jquery를 이용한 AJAX연결과 예제 (0) | 2021.04.29 |
| [jQuery] 제이쿼리 AJAX (0) | 2021.04.29 |
댓글