jQuery : ตอนที่ 1 jQuery Tab

JAVASCRIPT

<script language="javascript">
$(function(){
	$(".tab ul li").click(function(){
		$(this).addClass("active").siblings().removeClass("active").end().parent() .parent().find("div > div:eq(" + $(this).parent().find('li').index($(this)) + ")").show().siblings().hide();
//อาจจะยาวไปนิด แต่บรรทัดเดียวนะตัวเธอว์
	});
});
</script>

CSS

.tab{
width:400px;
margin:50px auto;
}

.tab div div{
display:none;
border-top:2px solid #AD1342;
padding:10px; height:200px;
background:#FFF;
}

.tab ul li{
display:inline
cursor:pointer;
background:#CCC;
color:#333;
padding:2px 10px;
float:left;
margin:0 2px 0 0;
}

.tab ul li.active{
background:#AD1342;
color:#FFF;
}

HTML MARK UP

<div class="tab">
    <ul>
        <li class="active">tab-1</li>
        <li>tab-2</li>
        <li>tab-3</li>
        <li>tab-4</li>
        <li>tab-5</li>
    </ul>
    <div>
        <div style="display:block;">content-1</div>
        <div>content-2</div>
        <div>content-3</div>
        <div>content-4</div>
        <div>content-5</div>
    </div>
</div>

DEMO