탭메뉴 여러개 사용 질문
본문
안녕하세요.
구글링하여 탭메뉴를 적용했는데요
이걸 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 내에서 클래스를 이용하여 어떻게 접근하는지 조금 더 보셔야 할 듯 해요
<ul class="tab first">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="tab_container first">
<div class="tab_content">1</div>
<div class="tab_content">2</div>
<div class="tab_content">3</div>
</div>
<ul class="tab sec">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="tab_container sec">
<div class="tab_content">a</div>
<div class="tab_content">b</div>
<div class="tab_content">c</div>
</div>
<ul class="tab th">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="tab_container th">
<div class="tab_content">aa</div>
<div class="tab_content">bb</div>
<div class="tab_content">cc</div>
</div>
<script>
$(function () {
var tab = "tab";
var container = "tab_container";
var content = "tab_content";
$("."+content).each(function(){
$(this).hide();
});
$("."+container).each(function(){
$(this).children(".tab_content:first").show();
});
$("ul."+tab+" li").click(function (){
var index = $(this).index();
var parent = this.closest("ul");
var classname = this.closest("ul").className;
var arr = classname.split(" ");
var target = arr[arr.length-1];
$(parent).children("ul."+tab+" li").removeClass("active").css("color", "#AAA");
$(this).addClass("active").css("color", "#333");
$("."+container+"."+target+"> ."+content).hide();
$("."+container+"."+target+"> ."+content).each(function(i){
if(i == index){
$(this).fadeIn();
}
});
});
});
</script>
이런느낌으로 사용하실 것을 권하네요
와우. 정말 감사합니다.
루미집사님의 스킨 참고하세요.
- 한페이지에 무한대로 탭그룹 생성
- 다수의 탭을 추가
- 자동으로 탭 이동 (이동시간, 순차반복, 역순반복 랜덤반복, 탭이동시간설정)
- 탭에 링크 걸기
- 외부문서 불러오기
- 각 탭 그룹별로 높이 지정
- 마우스오버 또는 마우스클릭으로 탭 선택
- 탭을 오른쪽 또는 왼쪽 정렬
답변을 작성하시기 전에 로그인 해주세요.
