탭메뉴에 링크를 적용하려면
본문
아래와 같은 탭메뉴를 사용중인데요...
탭 메뉴 부분에 링크를 적용하려면 어떻게 하면 되는지요. 즉 빨간색 메뉴를 클랙했을 때(더블 클릭?)
해당 페이지로 이동되게 하려고 합니다.
고수님들 알려주세요.....
스크립트
var tabsObj,Act,Tab,Box,i,n;
function topics(num) {
tabsObj = document.getElementById('tabs');
n = tabsObj.getElementsByTagName('li').length;
Act = 'tab' + num;
for(i=1; i<n+1; i++){
Tab = 'tab' + i;
Box = 'topic' + i;
if(Act == Tab) {
//IE8、Firefox 等
if(i == 1) { document.getElementById(Tab).setAttribute('class','first active'); }
else if(i == n) { document.getElementById(Tab).setAttribute('class','last active'); }
else { document.getElementById(Tab).setAttribute('class','active'); }
//IE7以下
if(i == 1) { document.getElementById(Tab).setAttribute('className','first active'); }
else if(i == n) { document.getElementById(Tab).setAttribute('className','last active'); }
else { document.getElementById(Tab).setAttribute('className','active'); }
document.getElementById(Box).style.display = 'block';
document.getElementById(Box).style.paddingTop = '0';
document.getElementById(Box).style.borderBottom = 'none';
}
else {
//IE8、Firefox 等
if(i == 1) { document.getElementById(Tab).setAttribute('class','first passive'); }
else if(i == n) { document.getElementById(Tab).setAttribute('class','last passive'); }
else { document.getElementById(Tab).setAttribute('class','passive'); }
//IE7以下
if(i == 1) { document.getElementById(Tab).setAttribute('className','first passive'); }
else if(i == n) { document.getElementById(Tab).setAttribute('className','last passive'); }
else { document.getElementById(Tab).setAttribute('className','passive'); }
document.getElementById(Box).style.display = 'none';
}
}
}
+++++++++++++++++++++++++++++
<ul class="tabs clearFix" id="tabs">
<li id="tab1"><a href="#" onclick="topics(1); return false;">종합 정보</a></li>
<li id="tab2"><a href="#" onclick="topics(2); return false;">비자(재류자격) 정보</a></li>
<li class="last" id="tab3"><a href="#" onclick="topics(3); return false;">대사관 정보</a></li>
</ul>
<div class="topicArea">
<div class="topic" id="topic1">
<?=latest_notice("bada_2_latest_jeongbo", "q_a_board", 6, 70);//종합정보?>
</div>
<div class="topic" id="topic2">
<?=latest("bada_2_latest_jeongbo", "visa_info", 6, 70);//비자정보?>
</div>
<div class="topic" id="topic3">
<?=latest("bada_2_latest_jeongbo", "embassy_info", 6, 70);//대사관 정보?>
</div>
<script type="text/javascript">
<!--
topics(1);
-->
</script>
답변 2
종합정보를 누르면 종합정보 최신글이 보여지고
비자정보를 누르면 비자정보 최신글이 보여지고
대사관정보를 누르면 대사관정보 최신글이 보여지게 javascript로 구현이 되어있네요.
현재 소스는 해당 탭을 누르면 해당정보의 최신글이 보여지게 링크가 구현이 되어 있네요.
그래서 기존 링크는 그대로 두시고 별도로 "more" 버튼을 만들어서 링크를 걸어야될것 같습니다.
<li id="tab1"><a href="#" onclick="topics(1); return false;">종합 정보</a><a href="링크주소1" >more</a></li>
<li id="tab2"><a href="#" onclick="topics(2); return false;">비자(재류자격) 정보</a><a href="링크주소2" >more</a></li>
<li class="last" id="tab3"><a href="#" onclick="topics(3); return false;">대사관 정보</a><a href="링크주소3" >more</a></li>
그런 방법도 있네요....
감사합니다...^^
#부분 (href="#") 에 #대신 링크주소를 적어주면 될것 같아요.
vitamin 님,
금방 해봤는데 효과가 없던데요.........
