제이쿼리 질문좀 드리겠습니다
본문
아래부분인데요
index 부분이 넣을건데요 아래 쿼리때문에
헤더 a태그 클릭하는 모든부분이 충돌 나는데 어떻게 해야하나요
아래 쿼리는 탭메뉴 쿼리입니다
<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>
답변 3
11줄의 문제는 아니구요
현재 올려주신부분의 jquery 와 다른데서 사용하는 jquery 충돌인듯 합니다
올려주신 부분을 그대로 복사해서 했더니 정상 작동 됩니다
흠...
11줄 $('li[class~=current]') 요거 $('li[class=current]') 수정해보시구요
테스트를 원하시면 탭메뉴의 html과 css도 함께 올려주세요
글 올렸습니다
답변달아주셔서 감사합니다
.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; }
<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", 12, 23,'','',서울남부); ?>
</div>
<div id="tabContent02" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',서울동부); ?>
</div>
<div id="tabContent03" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',서울서부); ?>
</div>
<div id="tabContent04" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',서울북부); ?>
</div>
<div id="tabContent05" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',경기북부); ?>
</div>
<div id="tabContent06" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',경기남부); ?>
</div>
<div id="tabContent07" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',강원); ?>
</div>
<div id="tabContent08" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',충청); ?>
</div>
<div id="tabContent09" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',전라); ?>
</div>
<div id="tabContent10" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',경상); ?>
</div>
<div id="tabContent11" class="tabPage">
<?php echo latest2("tabgall", "hall", 12, 23,'','',제주); ?>
</div>
</div>
