TAB样式的设计实现

在页面的开发中常常会用到上面一排菜单的样式，然后点击上面的菜单就会使下面显示不同的内容：

<ul id="analysis-nav" class="nav nav-pills" style="margin-bottom: 15px;">
    <li id="test1" class="active">
        <a href="javascript:loadAnalysis('test1');">test1</a>
    </li>
    <li id="test2">
        <a href="javascript:loadAnalysis('test2');">test2</a>
    </li>
	<li id="test3">
        <a href="javascript:loadAnalysis('test3');">test3</a>
    </li>
</ul>
<div>
    要显示的内容
</div>

 在javascript中就可以做如下控制

<script type="text/javascript">
//点击TAB时触发不同的方法
 function getAnalysisData(t){
    var _data = [];
	if(t == 'test1'){ //点击test1要做的事情
	   _data = gettest1();
	}else if(t == 'test2'){ //点击test2要做的事情
	   _data = gettest2();
	}else if(t == 'test3'){ //点击test3要做的事情
	   _data = gettest3();
	}
    createChart(_data);
  }
  function querytest1(){
   //业务方法
 }
  function querytest2(){
   //业务方法
  }
 function querytest3(){
   //业务方法
 }
 
</script>