탭메뉴 링크 클릭시 탭메뉴 고정시키려면
본문
아래 탭메뉴를 사용하고 있습니다.
A를 클릭시 보이는 메뉴를 클릭시에는 A상태가 유지됩니다.
B를 클릭후 보이는 메뉴를 클릭시에는 B가 유지되지 않고 A로 돌아가 버립니다.
어떻게 수정을 해주면 되나요??
(아래 원본 소스는 탭메뉴가 3개 이지만
3번째는 지우고 현재 2개만 사용하고 있습니다.)
<script type="text/javascript">
$(function () {
tab('#tab',0);
});
function tab(e, num){
var num = num || 0;
var menu = $(e).children();
var con = $(e+'_con').children();
var select = $(menu).eq(num);
var i = num;
select.addClass('on');
con.eq(num).show();
menu.click(function(){
if(select!==null){
select.removeClass("on");
con.eq(i).hide();
}
select = $(this);
i = $(this).index();
select.addClass('on');
con.eq(i).show();
});
}
</script>
<ul class="tab" id="tab">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="tab_con" id="tab_con">
<div>1st Contents</div>
<div>2nd Contents</div>
<div>3rd Contents</div>
</div>
답변 1
tab('#tab',0);
이 스크립트로 인해 고정이 되는것 같네요.
해당 li 클릭시 해당 li에 on 클래스를 주고, 해당 div 내용이 보이게 하는 것도 방법일듯 합니다.
