테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 텝버튼 소스 질문드려요~ 채택완료

갱쿤 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년 전
결국 노가다의 끝을보고 완료했습니다. 힌트 감사해요~ ^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인