如何实现tab栏的切换效果

<ul id="tab">
 <li class="fli">tab1</li>
 <li>tab2</li>
 <li>tab3</li>
</ul>

<p id="tab_con">

 <p class="fp">aaaa</p>

 <p>bbbb</p>

 <p>cccc</p>

</p>

 ul, li, p {
 padding: 0;
 margin: 0;
 }

 ul li {
 float: left;
 width: 100px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 background-color: #fff;
 border: 1px #bbb solid;
 border-bottom: none;
 cursor: pointer;
 }

 ul li.fli {
 background-color: #ccc;
 color: red;
 }

 ul {
 overflow: hidden;
 zoom: 1;
 list-style-type: none;
 }

 #tab_con {
 width: 304px;
 height: 200px;
 }

 #tab_con p {
 width: 304px;
 height: 200px;
 display: none;
 border: 1px #bbb solid;
 border-top: none;
 }

 #tab_con p.fp {
 display: block;
 background-color: #ccc;
 }

 .tclass{
 width: 100px;
 height: 30px;
 background: #000;
 }

<script type="text/javascript">

 var tabs = document.getElementById("tab").getElementsByTagName("li");
 var ps = document.getElementById("tab_con").getElementsByTagName("p");
 for (var i = 0; i < tabs.length; i++) {
 tabs[i].onclick = function () {
 change(this);
 }
 }

 function change(obj) {

 for (var i = 0; i < tabs.length; i++) {
 if (tabs[i] == obj) {
 tabs[i].className = "fli";
 ps[i].className = "fp";
 }
 else {
 tabs[i].className = "";
 ps[i].className = "";
 }
 }
 }

</script>