Tab鼠标经过事件按钮代码

Hhtl

 1 < div  id ="sujingnan" >
 2     < ul  id ="nav-table" >
 3      < li >
 4       < A   onmouseover ="tabWinMouseOver('tabWin',1,this);"  class ="tabWin_Content1"  href ="#"  id ="tabWin_Title1" >
 5       经典案例 </ A >
 6      </ li >
 7      < li >
 8       < a  onMouseOver ="tabWinMouseOver('tabWin',2,this);"  class ="tabWin_Content2"   href ="#"  id ="tabWin_Title2" >
 9       网站功能 </ a >
10      </ li >
11      < li >
12       < a  onMouseOver ="tabWinMouseOver('tabWin',3,this);"   class ="tabWin_Content2"  href ="#"  id ="tabWin_Title3" >
13       解决方案 </ a >
14      </ li >
15     
16     
17     </ ul >
18    
19     </ div >
20     < div  id ="tab1" >< iframe  src ="http://localhost/fangyinan/iframe/leftright.htm"  frameBorder ="0"  width ="99%"  scrolling ="no"  height ="150" ></ iframe ></ div >
21        < div  id ="tab2" >< iframe  src ="http://localhost/fangyinan/iframe/gongneng.html"  frameBorder ="0"  width ="99%"  scrolling ="no"  height ="100%" ></ iframe ></ div >
22     < div  id ="tab3" > 33333 </ div >
23

CSS

 1
 2
 3
 4 #nav-table
 5 {} {
 6 
 7 margin-top:3px;
 8 list-style:none;
 9 border:0px  solid #000;
10 width:870px;
11 margin-left:0px;
12 float:left;
13 
14}
15  
16 #nav-table li {} {
17float:left;
18margin-bottom:0px;
19border-bottom:0px solid #000000;
20
21
22}
23
24 #nav-table li a {} {
25
26text-decoration:none;
27display:block;
28width:94px;
29height:27px;
30
31font-size:12px;
32margin-left:0px;
33padding-top:8px;
34padding-left:18px;
35
36}
37
38 #sujingnan
39 {} {
40width:100%;
41border:0px solid #009933;}
42
43 #tab1
44 {} {
45    float:left;
46 height:151px;
47 
48 border:1px  solid #A7B9BD;
49 margin-top:0px;
50 padding-top:0px;
51 text-align:center;
52}
53 #tab2
54 {} {
55 border-left:1px  solid #cce4f0;
56 border:1px  solid #A7B9BD;
57 height:151px;
58 display:none;
59 
60}
61 #tab3
62 {} {
63 border-left:1px  solid #cce4f0;
64 border:1px  solid #A7B9BD;
65 height:151px;
66 display:none;
67 
68}
69 .tabWin_Content2
70 {} {
71 font-size: 12px;
72 font-weight: bold;
73 color: #006699;
74 background-image: url(/sysmod/webmod10000002/images/change3.jpg);
75
76}
77
78 .tabWin_Content1
79 {} {
80 
81    font-size: 12px;
82 font-weight: bold;
83 color: #006699;
84 background-image: url(/sysmod/webmod10000002/images/change4.jpg);
85}
86
87
88
89

js

 1
 2 function  tabWinMouseOver(tabWinObj,tabWinTotal,obj)
 3 {
 4
 5 if(tabWinTotal==1)
 6 {
 7 
 8  document.getElementById("tab1").style.display="block";
 9  document.getElementById("tab2").style.display="none";
10  document.getElementById("tab3").style.display="none";
11  document.getElementById("tabWin_Title1").className="tabWin_Content1";
12  document.getElementById("tabWin_Title2").className="tabWin_Content2";
13  document.getElementById("tabWin_Title3").className="tabWin_Content2";
14     
15 }
16 else if(tabWinTotal==2)
17 {
18  document.getElementById("tab1").style.display="none";
19  document.getElementById("tab2").style.display="block";
20  document.getElementById("tab3").style.display="none";  
21  document.getElementById("tabWin_Title1").className="tabWin_Content2";
22  document.getElementById("tabWin_Title2").className="tabWin_Content1";
23  
24  document.getElementById("tabWin_Title3").className="tabWin_Content2";
25  
26 } 
27 else if(tabWinTotal==3)
28 {
29  document.getElementById("tab1").style.display="none";
30  document.getElementById("tab2").style.display="none";
31  document.getElementById("tab3").style.display="block"; 
32  document.getElementById("tabWin_Title1").className="tabWin_Content2";
33  document.getElementById("tabWin_Title2").className="tabWin_Content2";
34  document.getElementById("tabWin_Title3").className="tabWin_Content1";
35  
36  
37 }     
38}
39

转载于:https://www.cnblogs.com/sujingnan/archive/2008/03/09/1096998.html