스크립트 탭 질문 입니다.

사진가

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2019-05-11 (토) 19:25:33 2,729

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

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

그누보드5

답변 2개 / 댓글 3개

채택된 답변

+20 포인트

亞波治

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2019-05-12 (일) 04:08:31

스크립트에 https://aaa.php 같이 php 파일을 불러 올수 없습니다.

aaa.js 파일을 불러야 합니다.

펄스나인

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2019-05-11 (토) 22:01:06

안녕하세요.

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

선행조건 : jquery

Copy

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

SCRIPT

Copy

$(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 (사용용도에 맞게 변경하세요.)

Copy

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

Copy

<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