即点即现的实现

<script type="text/javascript"
src="http://www.cssrain.cn/demo/jquery.js"></script>
<script type="text/javascript">
var i=2;
$(document).ready(function(){
$("#total").css("cursor","pointer")
.click(function(){
if(i%2==0){
$("#total_student").css("display","");
$("#total_staff").css("display","");

$("#tea").css("display","none");
$("#stu").css("display","none");
$("#oth").css("display","none");
$("#ads").css("display","none");

$("#lst").css("display","none");
$("#hst").css("display","none");

i++;
}else{
   $("#total_student").css("display","none");
$("#total_staff").css("display","none");

$("#tea").css("display","none");
$("#stu").css("display","none");
$("#oth").css("display","none");
$("#ads").css("display","none");

$("#lst").css("display","none");
$("#hst").css("display","none");
i++;
}

});
});

var j=2;
$(document).ready(function(){
$("#total_student").css("cursor","pointer")
.click(function(){
if(j%2==0){
$("#tea").css("display","");
$("#stu").css("display","");
$("#oth").css("display","");
$("#ads").css("display","");
j++;
}else{
   $("#tea").css("display","none");
$("#stu").css("display","none");
$("#oth").css("display","none");
$("#ads").css("display","none");
j++;
}

});
});

var m=2;
$(document).ready(function(){
$("#total_staff").css("cursor","pointer")
.click(function(){
if(m%2==0){
$("#lst").css("display","");
$("#hst").css("display","");
m++;
}else{
$("#lst").css("display","none");
$("#hst").css("display","none");
m++;
}

});
});
</script>

 

<table width="100%" cellspacing="2" style="margin-top: 15px;">
<tr align="left">
   <th colspan="2">
    数据统计信息
   </th>
</tr>
<tr align="left">
   <th width="400px">
    <u id="total"> 总激活人数</u>
   </th>
   <td>
    1000人
   </td>
</tr>
<tr align="center" id="total_student" style="display: none">
   <th>
    学生激活人数
   </th>
   <td>
    50人
   </td>
</tr>

<tr align="right" id="tea" style="display: none">
   <th>

    在校本科生激活人数
   </th>
   <td>
    20人
   </td>
</tr>
<tr align="right" id="stu" style="display: none">
   <th>

    在校硕士生激活人数
   </th>
   <td>
    100人
   </td>
</tr>
<tr align="right" id="oth" style="display: none">
   <th>

    在校博士生激活人数
   </th>
   <td>
    200人
   </td>
</tr>
<tr align="right" id="ads" style="display: none">
   <th>

    在校留学生激活人数
   </th>
   <td>
    300人
   </td>
</tr>

<tr align="center" id="total_staff" style="display: none">
   <th>
    教职工激活人数
   </th>
   <td>
    200人
   </td>
</tr>

<tr align="right" id="lst" style="display: none">
   <th>

    在校教职工激活人数
   </th>
   <td>
    100人
   </td>
</tr>
<tr align="right" id="hst" style="display: none">
   <th>

    附属医院教职工激活人数
   </th>
   <td>
    100人
   </td>
</tr>

</table>

 

 

将上诉代码保存为html文件，用浏览器打开可看到效果。