Pernahkan kalian sewaktu berkunjung ke sebuah blog atau website melihat satu kotak yang berisi tentang artikel dan di salah satu sisinya tedapat tombol atau bagian yang ketika kita klik bagian tersebut maka akan konten isi nya akan beralih ke konten berikutnya..??

ya mungkin itu contoh realnya.
Jquery tabs ini berfungsi untuk mengefisienkan konten-konten yang mungkin terlalu banyak kedalam satu halaman atau bagian, setelah itu merapikannya serta mengelompokan ke dalam suatu bagian atau disini disebut dengan TABS, dan setiap konten tab tersebut dapat ditampilkan dengan mengklik bagian tabs tersebut.

Baiklah tanpa panjang lebar langsung saja ke tahap pemasangannya, biar anda yang menyimpulkannya.
hehehe…

Oke! langkah pertama buat file html yang isinya sebagai berikut,
<link href="tabs.css" rel="stylesheet" type="text/css">
<script src="jquery.js" type="text/javascript">
</script>

<script type="text/javascript">

$(document).ready(function(){
$("ul.tabs").tabs("div.panes > div");
});

</script>

<div>
   <ul><li><a href="#">Tab 1</a></li>
       <li><a class="" href="#">Tab 2</a></li>
       <li><a class="" href="#">Tab 3</a></li>
   </ul>
<div>
      <div style="display: block;">Isikan Konten Disini 1.</div>
      <div style="display: none;">Isikan Konten disini 2.</div>
      <div style="display: none;">Isikan konten disini 3.</div>
    </div>
</div>
Selanjutnya buat file CSS yang isisnya sebagai berikut,
/* root element for tabs  */
.wrap {
 width: 600px;
 margin: 0 auto;
 }
ul.tabs {
 list-style:none;
 margin:0 !important;
 padding:0;
 border-bottom:1px solid #666;
 height:30px;
}

/* single tab */
ul.tabs li {
 float:left;
 text-indent:0;
 padding:0;
 margin:0 !important;
 list-style-image:none !important;
}

/* link inside the tab. uses a background image */
ul.tabs a {
 background: url(tb.png) no-repeat -420px 0;
 font-size:11px;
 display:block;
 height: 30px;
 line-height:30px;
 width: 134px;
 text-align:center;
 text-decoration:none;
 color:#333;
 padding:0px;
 margin:0px;
 position:relative;
 top:1px;
}

ul.tabs a:active {
 outline:none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
 background-position: -420px -31px;
 color:#fff;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
 background-position: -420px -62px;
 cursor:default !important;
 color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */

/* width 1 */
ul.tabs a.s    { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover  { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l    { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover  { background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }

/* width 3 */
ul.tabs a.xl    { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover  { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }

/* initially all panes are hidden */
div.panes div.pane {
 display:none;
}

/* tab pane styling */
div.panes div {
 display:none;
 padding:15px 10px;
 border:1px solid #999;
 border-top:0;
 height:100px;
 font-size:14px;
 background-color:#fff;
}

/* end tab styling */

body {
 font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}

 /* get rid of those system borders being generated for A tags */
 a:active {
   outline:none;
 }
 :focus {
   -moz-outline-style:none;
 } 
Jika semuanya sudah benar maka tampilannya aka seperti gambar dibahwa ini,

Oke langkah terakhir untuk mendownload file yang sudah jadi silahkan