고난이도라 여쭤봅니다.
본문
답변 5
가장 좋은 방법은 php 에서 탭메뉴쪽 html 을 생성할때 링크를 같이 만드는 방법이지만
관련 php 소스가 제공되지 않았고
소스를 알수 있다고 해도 flexslider 에서 탭 클릭시 Event.preventDefault() 에 걸릴수도 있는 부분을 감안할때
다음과 같은 스크립트로 처리하는 방법이 있습니다.
<script>
$(function () {
var tabs_in = document.querySelectorAll('.tab_nav li');
var links_selector = [
'.tab_container ul.slides :not(li.clone) div.latest_mq1 tr:first-child td.subject a',
'.tab_container ul.slides :not(li.clone) div.latest_mq1 li:first-child .thumbArea a'
];
document.querySelectorAll(links_selector.toString()).forEach((el, i) => {
var href = el.href;
href = href.substring(0, href.lastIndexOf('/'));
var a = document.createElement('a');
a.href = href;
a.textContent = tabs_in[i].firstChild.nodeValue;
a.onclick = function (evt) { evt.stopPropagation(); }
tabs_in[i].replaceChild(a, tabs_in[i].firstChild);
});
});
</script>
해당 탭 소스를 보여주세요
이건 해당 부분을 flexslider라는 자바스크립트로 만든것 입니다.
클릭시 해당 레이어가 보이도록요.
/* 탭 */
.tab_nav{position:relative; margin-bottom:8px; overflow:hidden;}
.tab_nav ul{list-style:none; margin:0; padding:0;}
.tab_nav li{float:left; width:25%; height:36px !important; line-height:36px !important; background-color:#f5f5f5; border-left:1px solid #e0e0e0; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; text-align:center; font-size:14px; font-weight:800; color:#666; font-weight:normal; cursor:pointer; z-index:10; -webkit-transition:all .4s; -moz-transition:all .4s; -ms-transition:all .4s; transition:all .4s;}
.tab_nav li:first-child{border-radius:4px 0 0 0;}
.tab_nav li:last-child{border-radius:0 4px 0 0; border-right:1px solid #e0e0e0;}
.tab_nav li.flex-active{border-bottom:0; color:#333; font-weight:800; background-color:#fff; cursor:pointer;}
.tab_container{position:relative; float:left;}
그걸 클릭하면 다른 탭의 최신글을 바로 보고싶을 때 못 보는 불편이 생길 듯....
게시판으로는 가고 싶지 않고 단순히 해당 탭 내용만 보고 싶은 사람에게 안 좋은 사용자 경험을 주는 거라 하지 않는 게 나을 듯 합니다.
최신글 내용 맨 하단에 별도로 해당 게시판으로 가는 링크 만드시는 게 좋을 듯...
더보기 같은 문구로 게시판 바로가기 링크 거시면 될 듯...
오...그럴수도 잇겠네요. 고마워요
