纯CSS+Div 的标签【原创】

CSS内容：

Css　代码

 1  @charset "utf-8";
 2  /*  CSS Document  */
 3 
 4  /*
 5      author:JiYun_Lai
 6      date:2011/01/11 
 7      desc:纯CSS+Div 的标签
 8  */
 9 
10  /* 舌签鼠标样式 */
11  .tongue a:visited, a:active, a:link
12  {
13      color : #666666 ;
14      text-decoration :  none ;
15  }
16  .tongue a:hover
17  { color : #FF3399 ;
18  text-decoration : blink ;
19  }
20 
21  /* 主容器样式 */
22  /* 200*300 px */
23  .tongue_main {
24  width : 198px ;
25  height : 298px ;
26  font-size : 12px ;
27  border-color : #FFFF00 ;
28  border-style : solid ;
29  border-width : 1px ; }
30 
31  /* 舌签容器样式 */
32  /* 200*25 px */
33  .tongue {
34  border-bottom-color : #FFFF33 ;
35  border-bottom-style : solid ;
36  border-bottom-width : 1px ;
37  height : 24px ;
38  background : #BCA7B0 ;
39  }
40 
41  /* 主舌签样式 默认舌签样式 */
42  /* 25 * 60 px  */
43  .tongue_M_title {
44  width : 55px ;
45  float : left ;
46  height : 17px ;
47  background-color : #FFFFFF ;
48  margin : 0px 2px 0px 0px  ;
49  padding : 5px 3px 0px   ; ;
50  border-bottom-color : #FFFFFF ;
51  border-bottom-style : solid ;
52  border-bottom-width : 1px ;
53  font-weight : 600 ; }
54 
55  /* 副舌签样式 */
56  /* 25 * 60 px  */
57  .tongue_title {
58  width : 55px ;
59  float : left ;
60  height : 17px ;
61  background-color : #EFEFEF ;
62  margin : 0px 2px 0px 0px  ;
63  padding : 5px 3px 0px  ; }
64 
65  /* 舌签内容样式 */
66  /* 198 * 273 px */
67  .tongue_content {
68  background-color : #FFFFFF ;
69  width : 180px ;
70  height : 255px ;
71  float : left ;
72  padding : 9px 9px ;
73  }
74 
75  .tongue_clear {   clear : both ; }

Html　内容：

Html　代码

<! 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" >
< link  rel ="stylesheet"   type ="text/css"  href ="tongue.css"   />
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 纯CSS+Div 的标签 </ title >
< script  type ="text/javascript"  language ="javascript" >
{
function  change(id_M,id_O){
    document.getElementById( ' tongue_ ' + id_M).className  = " tongue_M_title " ;
    document.getElementById( ' tongue_content_ ' + id_M).style.display = " block " ;
     var  id_o_List  = String(id_O).split( ' , ' );
     for  (x  in  id_o_List){
        document.getElementById( ' tongue_content_ ' + id_o_List[x]).style.display = " none " ;
        document.getElementById( ' tongue_ ' + id_o_List[x]).className  = " tongue_title " ;
        }
    }
}
</ script >
</ head >

< body >
< div   class ="tongue_main" >
     < div  class ="tongue" >
         < a   href ="#"  class ="tongue_title"  id ="tongue_1"  onmouseover ="javascript:change('1','2,3');" > 新闻中心 </ a >
         < a  href ="#"  class ="tongue_M_title"  id ="tongue_2"  onmouseover ="javascript:change('2','1,3');" > 广东新闻 </ a >
         < a  href ="#"  class ="tongue_M_title"  id ="tongue_3"  onmouseover ="javascript:change('3','1,2');" > 深圳新闻 </ a >
         < div  class ="tongue_clear" ></ div >
         < div  class ="tongue_content"  id ="tongue_content_1" >  新闻中心 </ div >
         < div  class ="tongue_content"  id ="tongue_content_2"   style ="display:none" >  广东新闻 </ div >
         < div  class ="tongue_content"  id ="tongue_content_3"   style ="display:none" >  深圳新闻 </ div >         
     </ div >
</ div >
</ body >
</ html >

效果：