Tab鼠标经过事件按钮代码

最新推荐文章于 2024-09-26 14:24:29 发布

转载最新推荐文章于 2024-09-26 14:24:29 发布 · 287 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sujingnan/archive/2008/03/09/1096998.html

本文介绍了一种使用HTML、CSS及JavaScript实现的网页导航切换效果。通过简单的代码示例展示了如何创建具有三个不同选项卡的经典案例、网站功能与解决方案的导航栏，并详细解释了其背后的逻辑。每个选项卡下展示不同的内容，包括iframe嵌入页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hhtl

<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

</ul>
18

</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

#nav-table
5

{

}{
6

margin-top:3px;
8

list-style:none;
9

border:0px solid #000;
10

width:870px;
11

margin-left:0px;
12

float:left;
13

}
15

#nav-table li{

}{
17

float:left;
18

margin-bottom:0px;
19

border-bottom:0px solid #000000;
20

}
23

#nav-table li a{

}{
25

text-decoration:none;
27

display:block;
28

width:94px;
29

height:27px;
30

font-size:12px;
32

margin-left:0px;
33

padding-top:8px;
34

padding-left:18px;
35

}
37

#sujingnan
39

{

}{
40

width:100%;
41

border:0px solid #009933;}
42

#tab1
44

{

}{
45

float:left;
46

height:151px;
47

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

}
61

#tab3
62

{

}{
63

border-left:1px solid #cce4f0;
64

border:1px solid #A7B9BD;
65

height:151px;
66

display:none;
67

}
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

}
77

.tabWin_Content1
79

{

}{
80

font-size: 12px;
82

font-weight: bold;
83

color: #006699;
84

background-image: url(/sysmod/webmod10000002/images/change4.jpg);
85

}
86

function tabWinMouseOver(tabWinObj,tabWinTotal,obj)
3

{
4

if(tabWinTotal==1)
6

{
7

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

}
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

document.getElementById("tabWin_Title3").className="tabWin_Content2";
25

}
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

}
38

}
39

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