묻고답하기
외부에서 각각의 탭에 링크 걸기
2014.05.22 11:53
외부에서 각각의 탭에 링크 시킬 수 있는 방법이 있을까요?
즉 a라는 페이지에 탭1/탭2/탭3/탭4 이런 순서로 탭이 구성되어있을때,
메인이나 메뉴에서 특정 버튼을 클릭하면 b페이지의 탭1이 기본으로 보여지다가
링크타서 오면 특정탭이 보여지게 하고 싶습니다.
어떤분께서 아래와 같이 답변을 주셨는데,
그럼 이렇게 해보세요. b 페이지 스크립트에서 <? if($_GET("opentab")=='b'){ ?> $(".tab_content:first").show(); <? } else { ?> $("#tab2").show(); <? } ?> |
저는 겨우 소스만 찾아 붙여넣기 하는 정도의 수준이라, 어떻게 적용시켜야 할지, 나름 이것저것 시도는 해보았는데
오류가 나거나 적용이 안되더군요.
xe에 쓰는 문법이 따로 있는지, 왠지 구현될 것 같은데 도저히 방법을 모르겠어요 ㅠ.ㅠ
참고로 xe코어는 1.7.5이구요, 고수님들~~ 도와주세요오~~
ex ) 서브메뉴 2를 클릭했을 경우, a페이지의 tab2가 활성화
아래는 소스입니다.
-----메뉴----------------------------------------------------------------------------
<div id="menu">
<div id="nav">
<ul>
<li><a href="si_sub1_1">메뉴1</a></li>
<li><a href="si_sub2_1">메뉴2</a>
<ul>
<li><a href="#"
>서브메뉴1</a></li>
<li><a href="#"
>서브메뉴2</a></li>
<li><a href="#"
>서브메뉴3</a></li>
<li><a href="#"
>서브메뉴4<</a></li>
</ul>
</li>
<li><a
href="si_sub3_1">메뉴3</a></li>
<li><a
href="si_sub4_1">메뉴4</a></li>
<li><a
href="si_sub5_1">메뉴5</a>
<ul>
<li><a
href="si_sub5_1">메뉴6</a></li>
<li><a
href="si_sub5_2">메뉴7</a></li>
<li><a
href="si_sub5_3">메뉴8</a></li>
</ul>
</li>
<li><a href="#">메뉴9</a>
<ul>
<li><a
href="#">서브메뉴5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------
$(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").removeClass("tabs1").css("color","#000");
//$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"});
$(this).addClass("tabs1").css("color","#fff");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn()
});
});
</script>
<div id="container">
<li class="tabs1" rel="tab1">탭1</li>
<li rel="tab2" class="tabs2">탭2</li>
<li rel="tab3" class="tabs3">탭3</li>
<li rel="tab4" class="tabs4">탭4</li>
</ul>
test1
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
test2
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
test3
</div><!-- #tab3 -->
</div> <!-- .tab_container -->
</div>
------------------------------------------------------------------------------------
