日星网
搜索

记录日常点点滴滴，欢迎来到我的小站。

0%

JS 简单实现tab页

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>无标题文档</title>
  <SCRIPT LANGUAGE="JavaScript">
    function switch_Tab(objTab)
                {
                        //下面tab对于内容div块的id前缀
                        f_id="div_box_list_";
                        li_list=objTab.parentNode.getElementsByTagName("li");
                        //alert(li_list.length);
                        //alert(li_list[0]);
                        tagIndex=-1;
                        //判断鼠标停留在哪个TAB标签区域
                        for (i=0;i<li_list.length;i++)
                        {
                                if (li_list[i]==objTab)
                                {
                                        tagIndex=i;
                                        break;
                                }
                        }
                        if (tagIndex==-1)
                                return;

                        //根据上面找到停留的标签号,修改要显示对应的div块的display属性:block,不是的标签display属性:none.
                        for (i=0;i<li_list.length;i++)
                        {

                                objTagDiv=document.getElementById(f_id+(i+1));

                                //id="div_box_list_1"到id="div_box_list_3",是哪一个tab标签
                                if (tagIndex==i)
                                {
                                        objTagDiv.style.display='block';
                                }
                                else
                                {
                                        objTagDiv.style.display='none';
                                }

                        }

                }
        </SCRIPT>



  <style type="text/css">
    #List_Box {
      width: 750px;
      height: auto;
    }

    #List_Box #List_Box_top {
      height: 29px;
      padding: 11px 0px 0px 15px;
    }

    #List_Box #List_Box_top ul li {
      list-style-type: none;
      float: left;
      height: 21px;
      width: 102px;
      padding: 8px 0px 0px 28px;
      font-weight: bold;
      cursor: default;
    }

    .TAB_List {
      width: 720px;
      margin: auto;
      height: 310px;
    }

    #list_box_li1,
    #div_box_list_1 {
      background-color: #99CC66;
    }


    #list_box_li2,
    #div_box_list_2 {
      background-color: #FFFF99;
    }

    #list_box_li3,
    #div_box_list_3 {
      background-color: #CC3300;
    }
  </style>
</head>

<body>

  <DIV id="List_Box">
    <DIV id="List_Box_top">
      <UL>
        <LI id="list_box_li1" onclick="switch_Tab(this)">TAB:I型</LI>
        <LI id="list_box_li2" onclick="switch_Tab(this)">TAB:II型</LI>
        <LI id="list_box_li3" onclick="switch_Tab(this)">TAB:III型</LI>
      </UL>
    </DIV>
    <!-- 初始显示由下列属性决定:style="display: block; "        -->
    <DIV id="div_box_list_1" class="TAB_List" style="display: block; ">
      <p>这是标签1<br />TAB:I型</p>
    </DIV>
    <DIV id="div_box_list_2" class="TAB_List" style="display: none; ">
      <p>这是标签2<br />TAB:II型</p>
    </DIV>
    <DIV id="div_box_list_3" class="TAB_List" style="display: none; ">
      <p>这是标签3<br />TAB:III型</p>
    </DIV>
  </DIV>
</body>

</html>