탭메뉴 여러개 사용 질문 채택완료
안녕하세요.
구글링하여 탭메뉴를 적용했는데요
이걸 2개 이상 쓰려면 어떻게 해야 할까요
스크립트를 조금 변경했는데 적용이 안되네요 ㅠ
</p>
<p><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></p>
<p> </p>
<p> </p>
<p><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></p>
<p> </p>
<p> </p>
<p><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></p>
<p> </p>
<p> </p>
<p><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></p>
<p>
원문
http://jsfiddle.net/composite/3n74v/
스크립트부분에 중복되는걸 이름 변경해줬는데도 안되는데
어떻게 하면 될까요 고수님들..ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
3년 전
</p>
<p><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></p>
<p>
<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></p>
<p>
<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()
});</p>
<p> $(".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></p>
<p>
우선 동작은 하게끔 만들어뒀는데 jquery 내에서 클래스를 이용하여 어떻게 접근하는지 조금 더 보셔야 할 듯 해요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
3년 전
댓글을 작성하려면 로그인이 필요합니다.
3년 전
루미집사님의 스킨 참고하세요.
- 한페이지에 무한대로 탭그룹 생성 - 다수의 탭을 추가 - 자동으로 탭 이동 (이동시간, 순차반복, 역순반복 랜덤반복, 탭이동시간설정) - 탭에 링크 걸기 - 외부문서 불러오기 - 각 탭 그룹별로 높이 지정 - 마우스오버 또는 마우스클릭으로 탭 선택 - 탭을 오른쪽 또는 왼쪽 정렬
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택
<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>
[/code]
이런느낌으로 사용하실 것을 권하네요