스크립트 탭 질문 입니다.

스크립트 탭 질문 입니다.

QA

스크립트 탭 질문 입니다.

본문

<script type="text/javascript" src="https://aaa.php"></script>  란 문서를 index 페이지에 불러왔습니다. 

 

위 스크립트의 페이지는 잘 출력이 됩니다.

 

위 페이지스크립트를 5개정도 탭으로 만들어 인덱스 화면에서 탭으로 클릭해서 페이지를 보여주고 싶습니다...

 

 

이 질문에 댓글 쓰기 :

답변 2

안녕하세요.

5개 정도로해서 제이쿼리를 활용한 탭메뉴 예제입니다.

 

선행조건 : jquery


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 

SCRIPT


$(function () {
    $(".tab_content").hide();
    $(".tab_content:first").show();
    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active").css("color", "#333");
        $(this).addClass("active").css("color", "darkred");
        $(".tab_content").hide()
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn()
    });
});

 

CSS (사용용도에 맞게 변경하세요.)


ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    border-bottom: 0px solid #eee;
    border-left: 1px solid #eee;
    width: 100%;
    font-family:"dotum";
    font-size:12px;
}
ul.tabs li {
    float: left;
    text-align:center;
    cursor: pointer;
    width:100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #eee;
    border-left: none;
    font-weight: bold;
    background: #fafafa;
    overflow: hidden;
    position: relative;
}
ul.tabs li.active {
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.tab_container {
    border: 1px solid #eee;
    border-top: none;
    clear: both;
    float: left;
    width: 504px;
    background: #FFFFFF;
}
.tab_content {
    padding: 5px;
    font-size: 12px;
    display: none;
}
.tab_container .tab_content ul {
    width:505px;
    margin:0px;
    padding:0px;
}
.tab_container .tab_content ul li {
    padding:5px;
    list-style:none
}
 #container {
    width: 505px;
    margin: 0 auto;
}

 

HTML


<div id="container">
    <!-- #tab menu -->
    <ul class="tabs">
        <li class="active" rel="tab1">탭01</li>
        <li rel="tab2">탭02</li>
        <li rel="tab3">탭03</li>
        <li rel="tab4">탭04</li>
        <li rel="tab5">탭05</li>
    </ul>
    <!-- #tab menu -->
    <div class="tab_container">
        <!-- #tab1 -->
        <div id="tab1" class="tab_content">
            <ul>
                <li><a href="#">탭01 내용</a></li>
            </ul>
        </div>
        <!-- #tab1 -->
        <!-- #tab2 -->
        <div id="tab2" class="tab_content">
            <ul>
                <li><a href="#">탭02 내용</a></li>
            </ul>
        </div>
        <!-- #tab2 -->
        <!-- #tab3 -->
        <div id="tab3" class="tab_content">
            <ul>
                <li><a href="#">탭03 내용</a></li>
            </ul>
        </div>
        <!-- #tab3 -->
        <!-- #tab4 -->
        <div id="tab4" class="tab_content">
            <ul>
                <li><a href="#">탭04 내용</a></li>
            </ul>
        </div>
        <!-- #tab4 -->
        <!-- #tab5 -->
        <div id="tab5" class="tab_content">
            <ul>
                <li><a href="#">탭05 내용</a></li>
            </ul>
        </div>
        <!-- #tab5 -->
    </div>
</div>

 

 

결과물

 

1754226441_1557580072.1835.png

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT