whitt
116
2022-04-30 13:12:55
2
67

페이징 처리 css 적용 질문


페이징 처리하려는데 3번 페이지를 누르면 잠깐 css 속성이 바뀌었다가 3번페이지로 오면 다시 1번으로 

css가 고정이 됩니다. 다른 번호를 눌러도 계속 1번

으로 고정이되네요 .. a 태그를 쓰는게 원인일까요??


페이지 번호는 다음과 같이 for문으로 돌렸습니다.

<c:forEach begin="${pagelist.startPage }" end="${pagelist.endPage }" var="page">
      <li><a href="/book/booklist?page=${page }" class="">${page }</a></li>
</c:forEach>


스크립트 코드입니다. jquery 문법이고

해당 페이지에 들어가게되면 1번페이지로 처음에 나오게 되고 1번에 active 클래스를 추가해서

해당 css 속성을 적용시켰습니다.

그 후 사용자가 버튼을 클릭한 번호값을 받고 처음 선택된 클래스는 지우고

사용자가 클릭한 버튼값을 받아와서 active 클래스를 추가시키는 동작입니다.

<script type="text/javascript">
	$(function() {
		$(".page_nation > li  a").eq(0).addClass("active");
		
		$(".page_nation > li  a").click(function() {
			var i = ${pagelist.currentPage -1 }
			console.log(i);
			$(".page_nation > li > a").removeClass("active");
			$(this).addClass("active");
		});
	});
</script>

구글링 해보면 다른 블로그 글은 전부 boot strap 을 사용하던데 제꺼에 적용시키면 다깨져서 적용은 안시켰습니다. 해결방안에 대한 힌트나 방향만 알려주시면 처리해보겠습니다. 





















0
  • 답변 2

  • S_J
    425
    2022-04-30 13:30:52

    올려주신 소스로는 jquery쪽에 문제가 있네요.
    (a태그로 화면이 갱신되니 js쪽 소스가 초기화 돼서 1번으로 고정됨.)

  • whitt
    116
    2022-04-30 13:34:31
    그렇군요 감사합니다!
  • 로그인을 하시면 답변을 등록할 수 있습니다.