如何实现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>