탭메뉴 여러개 사용 질문

탭메뉴 여러개 사용 질문

QA

탭메뉴 여러개 사용 질문

본문

안녕하세요.

구글링하여 탭메뉴를 적용했는데요

이걸 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>

이런느낌으로 사용하실 것을 권하네요

루미집사님의 스킨 참고하세요.

https://sir.kr/g5_skin/32960

- 한페이지에 무한대로 탭그룹 생성
- 다수의 탭을 추가
- 자동으로 탭 이동 (이동시간, 순차반복, 역순반복 랜덤반복, 탭이동시간설정)
- 탭에 링크 걸기
- 외부문서 불러오기
- 각 탭 그룹별로 높이 지정
- 마우스오버 또는 마우스클릭으로 탭 선택
- 탭을 오른쪽 또는 왼쪽 정렬

답변을 작성하시기 전에 로그인 해주세요.
전체 75
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT