제이쿼리 텝버튼 소스 질문드려요~
본문
텝버튼 소스를 따로 나눠서 사용을 해야하는데
제이쿼리와 html 소를 복사하고
클레스명도 바꿔봤는데
반복으로 사용할수가없네요;;;
탭 버튼1 (공지, 온라인)
탭 버튼2 (겔러리1, 겔러리2)
으로 사용하고 싶습니다.
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.tabs .active{background:#abc;}
</style>
<ul class="tabs">
<li rel="tab1" class="active"><a href="#" title="전체">공지</a></li>
<li rel="tab2"><a href="#" title="전체">온라인</a></li>
</ul>
<div class="clear"><!-- // clear --></div>
<div id="tab1" class="tab_content">
공지내용
</div>
<div id="tab2" class="tab_content">
온라인내용
</div>
<ul class="tabs22">
<li rel="tab1" class="active"><a href="#" title="전체">겔러리</a></li>
<li rel="tab2"><a href="#" title="전체">겔러리2</a></li>
</ul>
<div class="clear"><!-- // clear --></div>
<div id="tab1" class="tab_content">
겔러리 내용
</div>
<div id="tab2" class="tab_content">
겔러리2 내용
</div>
<script>
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
<script>
$(function () {
$("ul.tabs22 li").click(function () {
$("ul.tabs22 li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
답변 1
증상이 무엇인가요?
탭 버튼1로는 공지, 온라인만, 탭 버튼2로는 갤러리, 갤러리2만 제어하고 싶으신건가요?
그런 것이라면, 갤러리 부분의 tab_content를 모두 tab_content2로 바꾸시고(html상의 class, script부분 모두), script 부분(갤러리 부분에 해당하는 것)에
$(".tab_content2").hide();
$(".tab_content2:first").show();
이렇게 넣어보세요.
결국 노가다의 끝을보고 완료했습니다. 힌트 감사해요~ ^^
답변을 작성하시기 전에 로그인 해주세요.
