안녕하세요.
구글링하여 탭메뉴를 적용했는데요
이걸 2개 이상 쓰려면 어떻게 해야 할까요
스크립트를 조금 변경했는데 적용이 안되네요 ㅠ
Copy
<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개 / 댓글 2개
채택된 답변
+20 포인트
2022-11-22 (화) 23:20:10
Copy
<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 내에서 클래스를 이용하여 어떻게 접근하는지 조금 더 보셔야 할 듯 해요
답변에 대한 댓글 2개
2022-11-23 (수) 00:29:21
2022-11-22 (화) 23:50:03
루미집사님의 스킨 참고하세요.
- 한페이지에 무한대로 탭그룹 생성
- 다수의 탭을 추가
- 자동으로 탭 이동 (이동시간, 순차반복, 역순반복 랜덤반복, 탭이동시간설정)
- 탭에 링크 걸기
- 외부문서 불러오기
- 각 탭 그룹별로 높이 지정
- 마우스오버 또는 마우스클릭으로 탭 선택
- 탭을 오른쪽 또는 왼쪽 정렬
답변을 작성하려면 로그인이 필요합니다.
<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]
이런느낌으로 사용하실 것을 권하네요