채택완료

탭메뉴 질문좀 드리겠습니다

위에 탭메뉴 아래 탭메뉴는 잘 동작하는데 위에 탭메뉴가 선택되어있고

아래에 탭메뉴를 선택하면 위의 선택되어있던 탭메뉴가 풀려버립니다 

이럴때 혹시 어떻게 해야하는지 알려주시면 감사하겠습니다 

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 포인트

뭔가 중복이 되니까 다른 텝에까지 영향을 끼치겠죠~

텝을 하는 스크립트의 값들을 찍어보세여 

두개의 탭메뉴에서 사용하는 id값들이 동일한 듯 합니다.

예를 들어 tabContent01과 tabContent02 이라는 id값이 두개인데 다른 값으로 구성해서 테스트해보세요. 

답변을 작성하려면 로그인이 필요합니다.