网页选项卡功能

 1   <script language="javascript" type="text/javascript">
 2    //选项卡操作
 3    function tabPageChanged(selected)
 4    {
 5        var lightColor = "white";
 6        var unlightColor = "whitesmoke";
 7        var tabItem = document.getElementById("tabItem");
 8        var tabPage = document.getElementById("tabPage");
 9        var i;
10        for(i = 0; i < tabItem.rows(0).cells.length; i ++)
11        {
12            tabItem.rows(0).cells(i).style.backgroundColor = unlightColor;
13            tabItem.rows(0).cells(i).style.borderBottomColor = tabItem.rows(0).cells(i).style.borderTopColor;
14        }
15        tabItem.rows(0).cells(selected).style.backgroundColor = lightColor;
16        tabItem.rows(0).cells(selected).style.borderBottomColor = lightColor;
17        for(i = 0; i < tabPage.rows.length; i ++)
18        {
19            tabPage.rows(i).style.display = "none";
20        }
21        tabPage.rows(selected).style.display = "block";
22        tabPage.rows(selected).style.backgroundColor = lightColor;
23        
24        var hid = document.getElementById("hidSelectedPage");
25        if(!!hid)
26        {
27            hid.value = selected;
28        }
29        
30    }
31
32    //页面加载后选中指定的选项卡
33    function tabPageInit()
34    {
35        var hid = document.getElementById("hidSelectedPage");
36        if(!!hid)
37        {
38            tabPageChanged(eval(hid.value));
39        }
40        else
41        {
42            tabPageChanged(0);
43        }
44    }
45    </script>

 1     <!-- 选项卡 Begin -->
 2                    <table id="tabItem" border="0" cellpadding="0" cellspacing="0" class="tabctrl_item"
 3                        height="25">
 4                        <tbody>
 5                            <tr>
 6                                <td align="center" onmousedown="tabPageChanged(0);" style="width: 180px">
 7                                    个人基本资料</td>
 8                                <td align="center" onmousedown="tabPageChanged(1);" style="width: 180px">
 9                                   受教育情况</td>
10                                <td align="center" onmousedown="tabPageChanged(2);" style="width: 180px">
11                                    注册资料</td>
12                                    <td align="center" onmousedown="tabPageChanged(3);" style="width: 180px">
13                                    其它资料</td>
14                            </tr>
15                        </tbody>
16                    </table>