탭메뉴 여러개 사용 질문
본문
안녕하세요.
구글링하여 탭메뉴를 적용했는데요
이걸 2개 이상 쓰려면 어떻게 해야 할까요
스크립트를 조금 변경했는데 적용이 안되네요 ㅠ
<ul class="tabs">
<li class="active" rel="tab1">1</li>
<li rel="tab2">2</li>
<li rel="tab3">3</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
1
</div>
<div id="tab2" class="tab_content">
2
</div>
<div id="tab3" class="tab_content">
3
</div>
</div>
<ul class="tabs2">
<li class="active2" rel="tab1">1</li>
<li rel="tab2">2</li>
<li rel="tab3">3</li>
</ul>
<div class="tab_container2">
<div id="tab1" class="tab_content2">
1
</div>
<div id="tab2" class="tab_content2">
2
</div>
<div id="tab3" class="tab_content2">
3
</div>
</div>
<script>
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#fff");
$(this).addClass("active").css("color", "#333");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
<script>
$(function () {
$(".tab_content2").hide();
$(".tab_content2:first").show();
$("ul.tabs2 li").click(function () {
$("ul.tabs2 li").removeClass("active2").css("color", "#fff");
$(this).addClass("active2").css("color", "#333");
$(".tab_content2").hide()
var activeTab2 = $(this).attr("rel");
$("#" + activeTab2).fadeIn()
});
});
</script>
원문
http://jsfiddle.net/composite/3n74v/
스크립트부분에 중복되는걸 이름 변경해줬는데도 안되는데
어떻게 하면 될까요 고수님들..ㅠㅠ
!-->답변 2
<ul class="tab1">
<li class="active" rel="tab1_1">1</li>
<li rel="tab1_2">2</li>
<li rel="tab1_3">3</li>
</ul>
<div class="tab_container">
<div id="tab1_1" class="tab_content">1</div>
<div id="tab1_2" class="tab_content">2</div>
<div id="tab1_3" class="tab_content">3</div>
</div>
<ul class="tab2">
<li class="active" rel="tab2_1">1</li>
<li rel="tab2_2">2</li>
<li rel="tab2_3">3</li>
</ul>
<div class="tab_container2">
<div id="tab2_1" class="tab_content2">1</div>
<div id="tab2_2" class="tab_content2">2</div>
<div id="tab2_3" class="tab_content2">3</div>
</div>
<script>
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tab1 li").click(function () {
$("ul.tab1 li").removeClass("active").css("color", "#AAA");
$(this).addClass("active").css("color", "#333");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
$(".tab_content2").hide();
$(".tab_content2:first").show();
$("ul.tab2 li").click(function () {
$("ul.tab2 li").removeClass("active").css("color", "#AAA");
$(this).addClass("active").css("color", "#333");
$(".tab_content2").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
우선 동작은 하게끔 만들어뒀는데 jquery 내에서 클래스를 이용하여 어떻게 접근하는지 조금 더 보셔야 할 듯 해요
!-->
루미집사님의 스킨 참고하세요.
- 한페이지에 무한대로 탭그룹 생성
- 다수의 탭을 추가
- 자동으로 탭 이동 (이동시간, 순차반복, 역순반복 랜덤반복, 탭이동시간설정)
- 탭에 링크 걸기
- 외부문서 불러오기
- 각 탭 그룹별로 높이 지정
- 마우스오버 또는 마우스클릭으로 탭 선택
- 탭을 오른쪽 또는 왼쪽 정렬
답변을 작성하시기 전에 로그인 해주세요.