页签实例

在网上找了好久的页签实例，终于找到一个可以用的html格式的页签！贴上来，以做备用！

  1 < HTML >
  2 < style >
  3   body

{font-size:12px;font-family:宋体}
4 ul.TabBarLevel1

{
  5  list-style:none;
  6  margin:0;
  7  padding:0;
  8  height:29px;
  9
10  }
11   ul.TabBarLevel1   li

{
12  float:left;
13  padding:0;
14  height:29px;
15  margin-right:1px;
16  background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif)   left   top   no-repeat;
17  }
18   ul.TabBarLevel1   li   a

{
19  display:block;
20  line-height:29px;
21  padding:0   20px;
22  color:#333;
23  background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif)   right   top   no-repeat;
24  white-space:   nowrap;
25  }
26   ul.TabBarLevel1   li.Selected

{
27  background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif)   left   top   no-repeat;
28  }
29   ul.TabBarLevel1   li.Selected   a

{
30  background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif)   right   top   no-repeat;
31  }
32
33   ul.TabBarLevel1   li   a:link,ul.TabBarLevel1   li   a:visited

{
34  color:#333;
35  }
36   ul.TabBarLevel1   li   a:hover,ul.TabBarLevel1   li   a:active

{
37  color:#F30;
38  text-decoration:none;
39  }
40   ul.TabBarLevel1   li.Selected   a:link,ul.TabBarLevel1   li.Selected   a:visited

{
41  color:#000;
42  }
43   ul.TabBarLevel1   li.Selected   a:hover,ul.TabBarLevel1   li.Selected   a:active

{
44  color:#F30;
45  text-decoration:none;
46  }
47   div.HackBox

{
48      padding   :   2px   2px   ;
49      border-left:   2px   solid   #6697CD;
50      border-right:   2px   solid   #6697CD;
51      border-bottom:   2px   solid   #6697CD;
52   height:200px;
53   width:359px;
54      display:none;
55  }
56
57    </ style >
58
59
60
61    < div   id = " Whatever " >
62    < ul    class = " TabBarLevel1 "    id = " TabPage1 " >
63    < li   id = " Tab1 " class = " Selected " >< a   href = " # "    onMouseover = " javascript:switchTab('TabPage1','Tab1'); " > 子虚乌有 </ a ></ li >
64    < li     id = " Tab2 " >< a   href = " # "    onMouseover = " javascript:switchTab('TabPage1','Tab2'); " > 金翅擘海 </ a ></ li >
65    < li     id = " Tab3 " >< a   href = " # "    onMouseover = " javascript:switchTab('TabPage1','Tab3'); " >< B >< font   color = " #22FF22 " > 知 </ font >< font   color = " #FF2222 " > 往 </ font >< font   color = " #001199 " > 观 </ font >< font   color = " #00fffa " > 来 </ font ></ B ></ a ></ li >
66    < li     id = " Tab4 " >< a   href = " # "    onMouseover = " javascript:switchTab('TabPage1','Tab4'); " > 我太低调 </ a ></ li >
67    </ ul >
68    < div   id = " cnt " >
69    < div   id = " dTab1 "     class = " HackBox " > 我为每一次的快乐而哭泣，我为每一次的悲伤而微笑。
70    </ div >
71    < div   id = " dTab2 "     class = " HackBox "    style = " display:block " > 【※卡秀儿精品屋※】
72
73    </ div >
74    < div   id = " dTab3 "     class = " HackBox " > 学习是件头疼的事，为了能活下去我不得不学习
75
76    </ div >
77    < div   id = " dTab4 "     class = " HackBox " > 仍然拣尽寒枝不肯安歇   微带着后悔   寂寞沙洲我该思念谁
78    </ div >
79    </ div >
80    </ div >
81    < script   language = " JavaScript " >
82    // Switch   Tab   Effect
83   function   switchTab(tabpage,tabid)

{
84                  var   oItem   =   document.getElementById(tabpage);
85  for(var   i=0;i<oItem.children.length;i++)

{
86  var   x   =   oItem.children(i);
87  x.className   =   "";
88  var   y   =   x.getElementsByTagName('a');
89  y[0].style.color="#333333";
90  }
91  document.getElementById(tabid).className   =   "Selected";
92  var   dvs=document.getElementById("cnt").getElementsByTagName("div");
93  for   (var   i=0;i<dvs.length;i++)

{
94      if   (dvs[i].id==('d'+tabid))
95          dvs[i].style.display='block';
96      else
97          dvs[i].style.display='none';
98  }
99  }
100
101    </ script >
102 </ HTML >
103
104

页签实例

你可能感兴趣的:(页签实例)