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