-
안녕하세요 선생님 탭메뉴를 구성하다 잘 해결이 안되는부분이 있어 여쭤봅니다 큰 탭메뉴가 사이드 영역에 있는 3가지이고 메인영역안에있는 메뉴 li가 있는데 이중에 .clearfix-sub << 이 클래스 안에 큰탭메뉴 처럼 3가지 li를 넣어 즉탭메뉴중 한개에 또 탭메뉴를 구성하고 싶었는데 기존 큰 탭메뉴 js를 활용하여 구성하려니 잘 구현이 안되서 질문드립니다,,ㅠ <!-- 컨 텐 츠 영 역 --> <section class="detail-content"> <div class="l_wrapper clearfix"> <!-- 사 이 드 영 역 --> <side class="content-side"> <h3>XENOSYS</h3> <div>
</div>
</side>
<!-- 메 인 영 역 -->
<main>
<!-- headlight -->
<ul class="clearfix">
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/01.headlight/thumb_01.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>MEDICAL HEADLIGHT SYSTEM</h4>
<p title="L2S15 Portable LED Surgical Headlight">L2SX5 Portable LED<br class="none"> Surgical Headlight</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/01.headlight/thumb_02.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>MEDICAL HEADLIGHT SYSTEM</h4>
<p title="L2S14C Wireless Headlight System">L2S14C Wireless<br class="none"> Headlight System</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/01.headlight/thumb_03.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>MEDICAL HEADLIGHT SYSTEM</h4>
<p title="L2SW">L2SW</p>
</div>
<!-- loupe -->
<ul class="clearfix-sub ">
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-bottom">
<h4>TLL Type</h4>
</div>
<div class="detail-thumb-top" style="height: 240px;">
< img src="../image/subpage/01.xenosys/02.loupe/TTL-type.jpg">
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-bottom">
<h4>ANGLE Type</h4>
</div>
<div class="detail-thumb-top" style="height: 240px;">
< img src="../image/subpage/01.xenosys/02.loupe/Angle-type.jpg">
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-bottom">
<h4>FLIP-UP TYPE</h4>
</div>
<div class="detail-thumb-top" style="height: 240px;">
< img src="../image/subpage/01.xenosys/02.loupe/FLIP-UP-type.jpg">
</div>
<!-- camera system -->
<ul class="clearfix">
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/03.camerasystem/thumb_01.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>MEDICAL CAMERA SYSTEM</h4>
<p title="LooksCAM2">LooksCAM2</p>
</div>
<!-- TTL TYPE -->
<ul class="tll-type">
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/thumb_01.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks2500">Looks2500</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/thumb_02.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks2800">Looks2800</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/thumb_03.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks3200">Looks3200</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/thumb_04.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks3500">Looks3500</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/thumb_05.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks5000">Looks5000</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/thumb_06.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks7500">Looks7500</p>
</div>
<!-- ANGLE TYPE -->
<ul class="angle-type">
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/angletype/01.Looks2700A/01_LOOKS2700A.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks2500">Looks2700A</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/angletype/02.Looks4000A/01_LOOKS4000A.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks2800">Looks4000A</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/angletype/03.Looks5500A/01_LOOKS5500A.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks3200">Looks5500A</p>
</div>
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/angletype/04.Looks7500A/01_LOOKS7500A.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks3500">Looks7500A</p>
</div>
<!-- FLIP TYPE -->
<ul class="flip-type">
<li class="l_col l_col_4_12 l_col_12_12_mb">
<div class="detail-thumb-top">
< img src="../image/subpage/01.xenosys/02.loupe/thumb_07.jpg">
</div>
<div class="detail-thumb-bottom">
<h4>SURGICAL TELESCOPE</h4>
<p title="Looks2500F">Looks2500F</p>
</div>
</main>
</div>
</section>$(document).ready(function () {
var link = document.location.href;
var tab = link.split('#');
console.log(tab[1]);
$('.detail-content side li').eq(tab[1] - 1).addClass('active').siblings().removeClass('active');
$('main ul').eq(tab[1] - 1).show().siblings().hide();
});$('.detail-content side li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var index = $(this).index();
$('main ul').eq(index).show().siblings().hide();
});고민고민하다 큰탭메뉴중 한개안에 탭메뉴 구성3개를 만들고 각각의 li를 클릭했을때 보여주고싶은 li마다 클래스를 부여하여 그 클래스가 보이게 설정해뒀습니다.. 근데 문제는 각 li를 클릭시 $('.tll-type').show(); 이부분이 보이면서 기존 그전에 보이는 li(.clearfix-sub li)들은 안보이게 했지만 다시 윈도우상 뒤로 가기를 누르니 .hide()로 코딩을 했으니 기존 li들이 안보이는상태가 되버리는 상황이 발생이되고.. 혹시 li들을 계속 보이게 하면서 위 클릭이벤트가 시작될때만 li들을 안보이게 하는 방법이 있을까요 아니면 제가 짠 코드를 큰 탭메뉴처럼 구성하려니 어딜 건드려야할지 감이 안잡힙니다..ㅠ $('.detail-content main .clearfix-sub li:eq(0)').click(function() { $('.tll-type').show(); $('.detail-content main .clearfix-sub li').hide(); });
- 답변은 로그인 후 가능합니다.