무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 게시판

게시판 카테고리 추가 예제소스

글번호 : 1038

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1038
게시판에 대해 카테고리를 추가하고 카테고리별로 글이 검색되도록 하실 수 있습니다. 관련 공지사항 확인하기 >> [클릭] 이 기능에 대한 예제소스를 안내해드리겠습니다. << 기능설정 >> [게시판/메일 > 게시판 관리 > 게시판 카테고리 관리] << 소스 작업 페이지 >> [게시판 디자인 > 원하시는 게시판 선택 > 목록/보기/쓰기/수정/패스워드 화면] << 예제소스>> [디자인 편집탭]

<div class="bbs-hd"> <ul class="link"> <li class="last"><a href="<!--/link_all_category/-->" id="board_cate_all" class="board_cate_tabs">전체</a></li> <!--/loop_cate_board_list/--> <li><a href="<!--/cate_board_list@link/-->" class="board_cate_tabs"><!--/cate_board_list@name/--></a></li> <!--/end_loop/--> <!--/select_board_category/--><a href="<!--/link_select_category/-->"> 이동</a> <!-- 별도 셀렉트박스를 노출하고 할때만 입력 --> </ul> </div>

[CSS탭] - 선택된 카테고리의 스타일 변경하고자 할 경우 아래 css에서 수정하면 됩니다.

.bbs-hd .link li a.on { font-weight:bold; }

[JS탭]

window.addEventListener('load', function () { var board_cate = new board_cate_on(); board_cate.init(); }); function board_cate_on() { this.is_enabled = false; this.board_cate_tabs = document.querySelectorAll('.board_cate_tabs'); this.board_cate_all = document.querySelector('#board_cate_all'); } board_cate_on.prototype.init = function () { this.disabled(); this.enabled(); if (!this.is_enabled) { this.board_cate_all.classList.add('on'); } } board_cate_on.prototype.get_params = function(name, url) { name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } board_cate_on.prototype.enabled = function () { var board_cate = this.get_params('board_cate', location.search); for (var i=0; i< this.board_cate_tabs.length; i++) { if (this.get_params('board_cate', this.board_cate_tabs[i]) == board_cate) { this.board_cate_tabs[i].classList.add('on'); this.is_enabled = true; return; } } } board_cate_on.prototype.disabled = function () { for (var i=0; i< this.board_cate_tabs.length; i++) { this.board_cate_tabs[i].classList.remove('on'); } }

<< 결과화면 >>
목록 1:1 문의