본문 바로가기
퍼블리싱

[JS 활용]티스토리 카테고리 별로 갤러리형/리스트형 목록 다르게 출력

by lionbum 2020. 7. 24.

html에 <s_list>(리스트형 목록) 와 <s_article_rep>내 <s_index_article_rep>(갤러리형 목록)을 추가.
이때 두 목록의 클래스 값은 다르게 설정. (searchList vs thumbList)
 

<s_list><!-- 리스트 -->
	<div class="searchList">
    	..리스트 치환자 등 생략..
	</div>
</s_list>

<s_article_rep>		
	<s_index_article_rep><!-- 썸네일 리스트 목록 -->	
		<div class="thumbList">
			..썸네일 치환자 등등 생략..
		</div>
	</s_index_article_rep>
				
	<s_permalink_article_rep><!-- 본문 내용 -->
		..생략..
	</s_permalink_article_rep>
</s_article_rep>

 
▶ </s_t3> 위에 아래의 스크립트 추가.

<script>
if(window.location.href.indexOf("tips") > -1) {	//카테고리명이 tips면
	$('.thumbList').hide();	//갤러리형 목록 thumbList를 감추고
	}
	else {
	$('.searchList').hide(); //그 외에는 리스트형 목록 searchList을 감춘다
	}
</script>

 
▶ 특정 카테고리 글 본문 출력됐을때 특정 div 스타일 다르게 주기

<script>
	if ( $('span.cate:contains("tips")').length > 0 ||
		$('span.cate:contains("renewal")').length > 0) {
		$('div').css({"display": "none", "color": "#000"}); 
		//스타일은 콤마로 구분
		$('div').css({"display": "none"});
	}
</script>

 
 
 
출처 : 
https://heeyat.tistory.com/9

728x90
반응형

댓글