[jQuery] 간단한 tab 메뉴 사용하기

 

script

<script type="text/javascript">
    $(document).ready(function() {
        $(".tab_content").hide();  
        
        $("ul.tabs li:eq(0)").addClass("active").show(); 
        $(".tab_content:eq(0)").show(); //Show first tab content

        $("ul.tabs li").click(function() {

            $("ul.tabs li").removeClass("active"); 
            $(this).addClass("active"); 
            $(".tab_content").hide(); 

            var activeTab = $(this).find("a").attr("href");
            $(activeTab).fadeIn();  
            return false;
        });
    });
</script>

css

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    /*--Gives the bevel look with a 1px white border inside the list item--*/
    border: 1px solid #fff; 
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
     /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    /*--Makes the active tab look like it's connected with its content--*/
    border-bottom: 1px solid #fff; 
}

.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}

html

<ul class="tabs">
    <li><a href="#tab1">tab 첫번째</a></li>
    <li><a href="#tab2">tab 두번째</a></li>
</ul>
<div class="tab_container">
  <div id="tab1" class="tab_content">
      	<li>첫번째</li>
	</div>
	<div id="tab2" class="tab_content">
      	<li>두번째</li>
    </div>
</div>