헤더는 제외하고 페이지 새로고침
본문
현재 메뉴의 카테고리를 클릭하면 border-bottom의 색상이 바뀌도록 자바스크립트 설정을 해두었습니다. 하지만 클릭 시 페이지 전체가 새로고침이 되기 때문에 결국 색이 바뀌지 않더라구요.
혹시 이런 경우 헤더는 제외한 나머지 부분만 refresh되도록 설정할 수 있는 방법이 있나요??
답변 4
보통 어렵습니다.
일반적으로 많이 쓰는 방식은,
페이지가 열렸을 때, 현재의 페이지와 매칭되는 메뉴 카테고리에 색상처리를 하는 것입니다.
<a href="page1.php" style="<?php echo ($_SERVER['SCRIPT_NAME'] == 'page1.php') ? 'border-bottom:1px solid red' : '' ?>">메뉴1</a>
말씀해주신 방법으로 고쳤습니다 css로 생각보다 간단한거였는데 왜 자바스크립트를 썼었는지ㅎㅎㅎ.. 감사합니다!!
ajax를 이용해서 컨텐츠만 바뀌도록 하는방법
또는 파라미터로 값을 넘겨서 파라미터값으로 색을 변경하는방법 두가지가 있습니다
그럴경우엔 파라미터로 확인하는방법으로 바꾸셔야 할것같습니다
말씀하신것처럼 바꿀려면 전체 페이지디자인을 다시해야합니다
물론 카테고리를 클릭했을때 무슨 이벤트가 일어나느냐에 따라 다르긴하겠지만
1. 간단한 이벤트다(예를들면 그냥 표시만 바뀌는) > 그럼 제이쿼리를 이용해서 색상만 스위칭하면 됩니다
2. 목록을 다시불러오는 이벤트다 > 페이지디자인을 새로해야합니다 or 파라미터로 확인해서 해당 카테고리에 맞는 색상을 찍어준다
다른 방법으로 해결했지만 다양한 방법 알려주셔서 감사합니다!
색상 정보를 저장?해서 페이지마다 넘겨 줘야(session)하는데
방법은
URL 파라미터, session, 쿠키, 브라우저 저장소( sessionStorage, localStorage) 등이 있습니다.
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
여기 코드를 응용해 보세요.
다른 방법으로 해결했지만 상세한 설명&링크까지 너무 감사합니다. 하나 더 공부하고 가요~
