테스트 사이트 - 개발 중인 베타 버전입니다

헤더는 제외하고 페이지 새로고침 채택완료

서울서클 4년 전 조회 2,287

현재 메뉴의 카테고리를 클릭하면 border-bottom의 색상이 바뀌도록 자바스크립트 설정을 해두었습니다. 하지만 클릭 시 페이지 전체가 새로고침이 되기 때문에 결국 색이 바뀌지 않더라구요. 

 

혹시 이런 경우 헤더는 제외한 나머지 부분만 refresh되도록 설정할 수 있는 방법이 있나요??

 

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
4년 전

보통 어렵습니다.

 

일반적으로 많이 쓰는 방식은, 

페이지가 열렸을 때, 현재의 페이지와 매칭되는 메뉴 카테고리에 색상처리를 하는 것입니다.

 

<a href="page1.php" style="<?php echo ($_SERVER['SCRIPT_NAME'] == 'page1.php') ? 'border-bottom:1px solid red' : '' ?>">메뉴1</a>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

서울서클
4년 전
말씀해주신 방법으로 고쳤습니다 css로 생각보다 간단한거였는데 왜 자바스크립트를 썼었는지ㅎㅎㅎ.. 감사합니다!!

댓글을 작성하려면 로그인이 필요합니다.

색상 정보를 저장?해서 페이지마다 넘겨 줘야(session)하는데

방법은

URL 파라미터, session, 쿠키, 브라우저 저장소( sessionStoragelocalStorage) 등이 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

 

편한 것은 쿠키나 브라우저 저장소지만

 

자바스크립트에서 처리하기에는 쿠키가 편할 수 있겠네요.

 

https://stackoverflow.com/questions/41528708/add-css-class-to-a-div-based-on-active-cookie

 

여기 코드를 응용해 보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

서울서클
4년 전
다른 방법으로 해결했지만 상세한 설명&링크까지 너무 감사합니다. 하나 더 공부하고 가요~

댓글을 작성하려면 로그인이 필요합니다.

Policia
4년 전

그럴경우엔 파라미터로 확인하는방법으로 바꾸셔야 할것같습니다

말씀하신것처럼 바꿀려면 전체 페이지디자인을 다시해야합니다

 

물론 카테고리를 클릭했을때 무슨 이벤트가 일어나느냐에 따라 다르긴하겠지만

1. 간단한 이벤트다(예를들면 그냥 표시만 바뀌는) > 그럼 제이쿼리를 이용해서 색상만 스위칭하면 됩니다

2. 목록을 다시불러오는 이벤트다 > 페이지디자인을 새로해야합니다 or 파라미터로 확인해서 해당 카테고리에 맞는 색상을 찍어준다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

서울서클
4년 전
다른 방법으로 해결했지만 다양한 방법 알려주셔서 감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

ajax를 이용해서 컨텐츠만 바뀌도록 하는방법

 

또는 파라미터로 값을 넘겨서 파라미터값으로 색을 변경하는방법 두가지가 있습니다

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인