短いコードでタブパネルを作る

<script src="jquery-1.7.2.min.js"></script>
<script>
$(function() {
    $("#menu li").click(function() {
        var num = $("#menu li").index(this);
        $(".tabContent").removeClass('active');
        $(".tabContent").eq(num).addClass('active');
        $("#menu li").removeClass('active');
        $(this).addClass('active')
    });
});
</script>
</pre>

<style>
/*タブペイン*/
#menu {
  text-align: left;
  border-bottom: 1px solid black;
}
#menu ul {
  margin: 0px 20px 0px 20px;
  padding: 0;
  list-style: none;
  margin-bottom: -1px;

}
#menu li {
  display: inline-block;
  background: #ddd;
  border: 1px solid black;
  padding: 0.2em 0.5em;
  margin: 0;
  }
#menu li:hover{
  cursor: pointer;
}
#menu li.active {
  background: white;
  border-bottom-color: white;
  color:black;
}
#menu li a:hover {
  text-decoration: underline;
}
div.tabContent {
  clear: both;
  border: 1px solid black;
  border-top:none;
  padding: 20px;
  display: none;
}
div.active {
  display: block;
}
</style>

<div id="menu">
  <ul>
    <li class="active">TAB 1</li>
    <li>TAB 2</li>
    <li>TAB 3</li>
  </ul>
</div>

<div class="tabContent active">This is the content of TAB 1.</div>
<div class="tabContent">This is the content of TAB 2.</div>
<div class="tabContent">This is the content of TAB 3.</div>