1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<?php
include_once("../../_common.php");
?>
<!-------ÅǸ޴º ½ÃÀÛ-------->
<script>
$(document).ready(function () {
    $('.t1').show();//ù¹ø° ÅÇ º¸ÀÓ

    $('#tabs li a').on('click',function(){
        index = $(this).parent().index() + 1;
        $('#tabs li a').css('background-color','#bbb').removeClass('active')
        $('.tabsContents').hide();
        $('.t'+ index).fadeIn();
        $(this).css('background-color','#000').addClass('active');
    });
});
</script>


<style>
    .wrapper { width:990px; margin-bottom:20px; }
    .wrapper ul#tabs { width:100%; }
    .wrapper ul#tabs li { width:328px; float: left; height:37px; border-left:1px solid #aaa; }
    .wrapper ul#tabs li a { display:block; width:328px; height:35px; color:#231f20; font-size:15px; line-height:35px; text-align:center; border:1px solid #aaa; border-left:0; background:#bbb; }
    .wrapper ul#tabs li a:hover{ background-color:#231f20; color:#fff; }
    .wrapper .active { background-color: #556677; color: red; }
    .wrapper .tabsContents { clear:both; display:none; width:100%; padding-top:20px; }
    .wrapper .tabsContents p{ padding-left:45px; font-size:14px; line-height:27px; font-weight:600; background:url('../images/common/dot_3x3.png') no-repeat 30px 12px; }
</style>

<div class="wrapper">
    <ul id="tabs">
        <li><a onclick='programCh2("0121");'>õ³â°æ¿µ</a></li>
        <li><a href="javascript:programCh2('0122');">õ³âPDA</a></li>
        <!--li><a onclick="programCh2('0122');">õ³âPDA</a></li-->
        <li><a onclick='programCh2("0123");'>ÀüÀÚ¼¼±Ý°è»ê¼­</a></li>
    </ul>

    <div class="tabsContents t1">
        <p>õ³â°æ¿µ °è¿­ Á¦Ç°±ºÀÇ ÀÚÁÖ¹¯´Â Áú¹®ÀÔ´Ï´Ù.</p>
        <p>»ó´Ü °Ë»ö¶õÀ» ÅëÇØ ¿øÇϽô ³»¿ëÀ» È®ÀÎÇØ º¸¼¼¿ä.</p>
    </div>
    
    <div class="tabsContents t2">
        <p>õ³â°æ¿µPDAÀÇ ÀÚÁÖ¹¯´Â Áú¹®ÀÔ´Ï´Ù.</p>
        <p>»ó´Ü °Ë»ö¶õÀ» ÅëÇØ ¿øÇϽô ³»¿ëÀ» È®ÀÎÇØ º¸¼¼¿ä.</p>
    </div>
    
    <div class="tabsContents t3">
        <p>ÀüÀÚ¼¼±Ý°è»ê¼­ °ü·Ã ÀÚÁÖ¹¯´Â Áú¹®ÀÔ´Ï´Ù.</p>
        <p>»ó´Ü °Ë»ö¶õÀ» ÅëÇØ ¿øÇϽô ³»¿ëÀ» È®ÀÎÇØ º¸¼¼¿ä.</p>
    </div>

</div><!-- //wrapper -->