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
 2function 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