こんばんわ　DevJamのコータローです。

非常にノロノロペースですが、jqueryの勉強を
細々とやっておりまして、とりあえず何か書いてみようと
弊社で一番と言っていい位、よくつかわれるであろう
タブ切り替えを書いてみました。

まだまだ、入門以前なのであまりいい出来では
ありませんが、今後もなにか書いたら、
ここに掲載して行こうかなと思っております。

それではソースを
まずはJS

$(function() {
	$("#tab li").click(function() {
		var num = $("#tab li").index(this);
		$(".tabmain").addClass('none');
		$(".tabmain").eq(num).removeClass('none');
		$("#tab li").removeClass('choice');
		$(this).addClass('choice')
	});
});

HTML

<ul id="tab">
<li class="choice">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
</ul>
<div class="tabmain">本文1</div>
<div class="tabmain none">本文2</div>
<div class="tabmain none">本文3</div>
<div class="tabmain none">本文4</div>

CSS

#tab li {
  float: left;
  padding: 10px;
  background: #eee;
}
#tab li.choice {
  background: #ccc;
}
.none {
  display: none;
}
.tabmain {
  clear: both;
  width: 500px;
  padding: 50px 0;
  text-align: center;
  background: #ccc;
}

動作サンプルはこんな感じ

以上、コータローでした。