이전 목록 다음
채택완료

ajax tab예제좀 알려주세요

주주니1
프로필 보기이 회원 글보기이 회원의 댓글보기
 2015-12-08 (화) 06:50:38 7,620

ajax tab예제좀  알려주세요 

그누보드5
|

답변 2개

채택된 답변
+20 포인트
레레스트
프로필 보기이 회원 글보기이 회원의 댓글보기
 2015-12-08 (화) 08:06:34
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <style type="text/css">
            .navcontainer1 ul{
                background:url('line.gif') bottom repeat-x;
                float:left;
                font:12px '굴림';
                margin:0;
                padding:0;
                width:100%;
            }
            .navcontainer1 ul li{
                display: inline;
                text-align: center;
            }
            .navcontainer1 ul li a  {
                border-left:1px solid #5F707A;
                border-top:1px solid #5F707A;
                border-bottom:1px solid #5F707A;
                background-color: #F1F1F4;
                font-weight: bold;
                color:#FFFFFF;
                float:left;
                padding:7px 20px;
                text-decoration:none;
            }
            .navcontainer1 ul li a.current1 {
                border-left:1px solid #5F707A;
                border-top:1px solid #5F707A;
                border-bottom:1px solid #fff;
                background-color: #fff;
                font-weight: bold;
                color:#333;
                float:left;
                padding:7px 20px;
                text-decoration:none;
            }
            .navcontainer1 ul li a.tab_last1    {
                border-right:1px solid #5F707A;
            }
            #tabcontent1{
                min-height: 200px;
                padding: 50px 10px;
            }
            #preloader1 {
                display:none;
                padding: 5px;
                text-align: center;
                background-color: #FFFFFF;
                border: 2px solid #999;
            }
        </style>
 
        <script type="text/javascript">
            function loadTabContent(tabUrl){
                $('#preloader1').show();
                $.ajax({
                    url: tabUrl,
                    cache: false,
                    success: function(message) {
                        $("#tabcontent1").empty().append(message);
                        $("#preloader1").hide();
                    }
                });
            }
 
            $(document).ready(function(){
                var l_left = ($("body").width() - $("#preloader1").width())/2;
                var l_top = ($("body").height() - $("#preloader1").height()+50)/2;
                $('#preloader1').css({'z-index':'9999', 'position':'absolute','left' : l_left+'px', 'top' : l_top+'px'});
 
                $(".tabmenu1").click(function(){
                    $(".tabmenu1").removeClass("current1");
                    $(this).addClass("current1");//메뉴 스타일 지우고, 이것만 지정
                    loadTabContent(this.href);
                    return false;//링크이동 막고
                });
                $(".navcontainer1 li a:last").addClass("tab_last1");//마지막 메뉴에 오른쪽 세로줄
                $("#tab_1").addClass("current1");//처음 펼쳐질 메뉴
            });
        </script>
    </head>
    <body>
    <div class="navcontainer1">
        <ul>
            <li><a id="tab_1" class="tabmenu1" href="tabs.php?id=1">Google</a></li>
            <li><a id="tab_2" class="tabmenu1" href="tabs.php?id=2">Yahoo</a></li>
            <li><a id="tab_3" class="tabmenu1" href="tabs.php?id=3">Hotmail</a></li>
            <li><a id="tab_4" class="tabmenu1" href="tabs.php?id=4">Twitter</a></li>
        </ul>
    </div>
    <div id="preloader1"><img class="view_image" src="loading.gif" align="absmiddle"> Loading...</div>
    <div id="tabcontent1">    Simple AJAX Tabs</div>

http://defle.nayana.com/board/view.php?bbs_code=jquery&ot%5Bbd_name%5D=1&bd_num=1242 

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