위에 탭메뉴 아래 탭메뉴는 잘 동작하는데 위에 탭메뉴가 선택되어있고
아래에 탭메뉴를 선택하면 위의 선택되어있던 탭메뉴가 풀려버립니다
이럴때 혹시 어떻게 해야하는지 알려주시면 감사하겠습니다
http://wedding2016.cafe24.com/ 해당 부분입니다
Copy
<?phpdefine('_INDEX_', true);include_once(G5_LIB_PATH.'/tab.lib.php');if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가 if (G5_IS_MOBILE) { include_once(G5_THEME_MOBILE_PATH.'/index.php'); return;} include_once(G5_THEME_PATH.'/head.php'); include_once(G5_LIB_PATH.'/latest.lib.php'); ?><style>.main_wrap {float:left;width:100%;}.main_img { width:100%; height:310px; background-color: #000; } .main_box{margin-top:30px;margin-bottom:30px;width:1090px; } .tabWrap {float:left; width: 810px; height: 620px; background-color: #505A69; }.tab_Menu { margin: 0px; padding: 0px; list-style: none; }.tabMenu {background-color: #F6F7F9; width: 73.4px; margin: 0px; text-align: center; padding-top: 10px; padding-bottom: 10px; float: left; }.tabMenu a { color: #000000; font-weight: bold; text-decoration: none; }.current { background-color: #F6F7F9; border: 1px solid blue; border-bottom:hidden; }.tabPage {width: 810px; height: 620px; float: left; } .community_box { float:left; width:280px; height:620px;background-color: #F6F7F9; }.community_box p{ font-size:15px; margin-top:10px;margin-left:7px; }.community_comm { width:255px; height:340px; margin-right:10px; margin-left:7px; margin-top:10px; background-color: #fff; -webkit-box-shadow: 0 0 3px 1px #ddd;} .community_magazine { width:255px; height:177px; margin-left:7px; margin-top:10px; background-color: #fff; -webkit-box-shadow: 0 0 3px 1px #ddd;} .ttabWrap {float:left; width: 810px; height: 620px; background-color: #505A69; }.ttab_Menu { margin: 0px; padding: 0px; list-style: none; }.ttabMenu {background-color: #F6F7F9; width: 73.4px; margin: 0px; text-align: center; padding-top: 10px; padding-bottom: 10px; float: left; }.ttabMenu a { color: #000000; font-weight: bold; text-decoration: none; }.tcurrent { background-color: #F6F7F9; border: 1px solid blue; border-bottom:hidden; }.ttabPage {width: 810px; height: 620px; float: left; } </style> <script type="text/javascript"> function tabSetting() { // 탭 컨텐츠 hide 후 현재 탭메뉴 페이지만 show $('.tabPage').hide(); $($('.current').find('a').attr('href')).show(); // Tab 메뉴 클릭 이벤트 생성 $('li').click(function (event) { var tagName = event.target.tagName; // 현재 선택된 태그네임 var selectedLiTag = (tagName.toString() == 'A') ? $(event.target).parent('li') : $(event.target); // A태그일 경우 상위 Li태그 선택, Li태그일 경우 그대로 태그 객체 var currentLiTag = $('li[class~=current]'); // 현재 current 클래그를 가진 탭 var isCurrent = false; // 현재 클릭된 탭이 current를 가졌는지 확인 isCurrent = $(selectedLiTag).hasClass('current'); // current를 가지지 않았을 경우만 실행 if (!isCurrent) { $($(currentLiTag).find('a').attr('href')).hide(); $(currentLiTag).removeClass('current'); $(selectedLiTag).addClass('current'); $($(selectedLiTag).find('a').attr('href')).show(); } return false; }); } $(function () { // 탭 초기화 및 설정 tabSetting(); });</script> <div class="main_wrap"> <div class="main_img"> e </div> <div class="main_box"> <div class="tabWrap"> <ul class="tab_Menu"> <li class="tabMenu current"> <a href="#tabContent01" >서울남부</a> </li> <li class="tabMenu"> <a href="#tabContent02" >서울동부</a> </li> <li class="tabMenu"> <a href="#tabContent03" >서울서부</a> </li> <li class="tabMenu"> <a href="#tabContent04" >서울북부</a> </li> <li class="tabMenu"> <a href="#tabContent05" >경기북부</a> </li> <li class="tabMenu"> <a href="#tabContent06" >경기남부</a> </li> <li class="tabMenu"> <a href="#tabContent07" >강원</a> </li> <li class="tabMenu"> <a href="#tabContent08" >충청</a> </li> <li class="tabMenu"> <a href="#tabContent09" >전라</a> </li> <li class="tabMenu"> <a href="#tabContent10" >경상</a> </li> <li class="tabMenu"> <a href="#tabContent11" >제주</a> </li> </ul><div class="tab_Content_Wrap"> <div id="tabContent01" class="tabPage"><?php echo latest2("tabgall", "hall", 5, 23,'','',서울남부); ?> </div> <div id="tabContent02" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',서울동부); ?> </div> <div id="tabContent03" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',서울서부); ?> </div><div id="tabContent04" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',서울북부); ?> </div> <div id="tabContent05" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',경기북부); ?> </div> <div id="tabContent06" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',경기남부); ?> </div> <div id="tabContent07" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',강원); ?> </div> <div id="tabContent08" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',충청); ?> </div> <div id="tabContent09" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',전라); ?> </div> <div id="tabContent10" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',경상); ?> </div><div id="tabContent11" class="tabPage"> <?php echo latest2("tabgall", "hall", 5, 23,'','',제주); ?> </div> </div> </div> <div class="community_box"><p>커뮤니티</p> <div class="community_comm"> <?php echo latest("Nimple_basic", "test", 6, 15); ?> </div> <p>매거진</p> <div class="community_magazine"> dfs </div> </div></div> </div> <script type="text/javascript"> function ttabSetting() { // 탭 컨텐츠 hide 후 현재 탭메뉴 페이지만 show $('.ttabPage').hide(); $($('.tcurrent').find('a').attr('href')).show(); // Tab 메뉴 클릭 이벤트 생성 $('li').click(function (event) { var tagName = event.target.tagName; // 현재 선택된 태그네임 var selectedLiTag = (tagName.toString() == 'A') ? $(event.target).parent('li') : $(event.target); // A태그일 경우 상위 Li태그 선택, Li태그일 경우 그대로 태그 객체 var currentLiTag = $('li[class~=tcurrent]'); // 현재 current 클래그를 가진 탭 var isCurrent = false; // 현재 클릭된 탭이 current를 가졌는지 확인 isCurrent = $(selectedLiTag).hasClass('tcurrent'); // current를 가지지 않았을 경우만 실행 if (!isCurrent) { $($(currentLiTag).find('a').attr('href')).hide(); $(currentLiTag).removeClass('tcurrent'); $(selectedLiTag).addClass('tcurrent'); $($(selectedLiTag).find('a').attr('href')).show(); } return false; }); } $(function () { // 탭 초기화 및 설정 ttabSetting(); });</script> <div class="main_box"> <div class="ttabWrap"> <ul class="ttab_Menu"> <li class="ttabMenu tcurrent"> <a href="#ttabContent01" >서울남부</a> </li> <li class="ttabMenu"> <a href="#ttabContent02" >서울동부</a> </li> </ul><div class="ttab_Content_Wrap"> <div id="ttabContent01" class="ttabPage"><?php echo latest2("tabgall", "hall", 5, 23,'','',서울남부); ?> </div> <div id="tabContent01" class="tabPage"><?php echo latest2("tabgall", "hall", 5, 23,'','',서울남부); ?> </div> </div> </div> <?php include_once(G5_THEME_PATH.'/tail.php');?>
|
답변 2개
채택된 답변
+20 포인트
9년 전
뭔가 중복이 되니까 다른 텝에까지 영향을 끼치겠죠~
텝을 하는 스크립트의 값들을 찍어보세여
9년 전
두개의 탭메뉴에서 사용하는 id값들이 동일한 듯 합니다.
예를 들어 tabContent01과 tabContent02 이라는 id값이 두개인데 다른 값으로 구성해서 테스트해보세요.
답변을 작성하려면 로그인이 필요합니다.