[Jquery] Ajax로 페이징시 선택된 번호 Active

Scenario: 페이징을 할경우 밑에 숫자가 뜨게된다. 만약 Ajax를 쓰지 않을 경우, 서버에서 nowPage 라고 선택된 페이지를 넣어주고 클라이언트에서 받아서 if문에 i와 now page를 찍어주면 활성화된 페이지 번호에 class="active" 를 써주면 된다.

그러나 ajax로하면 비동기로 하기때문에(페이지를 분기하는게 아님), 리플부분만 갱신해주고 page 번호는 다시 안찍어주기떄문에 복잡해졌는데, 단순하게 jquery로 클릭한 부분에 대해서 Active하는 방법을 알 수있엇다

(boot strap 기준)

Solution:

jQuery 0.42 KB

1.     $(function(){
2.      var pageBtn = $("ul > li");    //  ul > li 이를 pageBtn 으로 칭한다. (클릭이벤트는 li에 적용 된다.)
3.       pageBtn .find("a").click(function(){   // pageBtn 에 속해 있는  a 찾아 클릭.
4.       pageBtn .removeClass("active");     // pageBtn 속에 (active) 클래스를 삭제.
5.       $(this).parent().addClass("active"); // 클릭한 a에 (active)클래스를 넣는다.
6.      })
7.     });

ex) Ajax로 페이지가 분기하지 않고 비동기적으로 댓글내용을 페이징함, 밑에 번호들도 클릭시 active되게 바꿔줌.