分享程序员开发的那些事...
更新时间：2022-08-14 22:35:54
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/*下面是景点页面的变动代码*/ .tabbox { height: 176px;
padding-bottom: 10px;
}.tabmenu { height:25px;
background:url(../imges/scenery_04.jpg) right no-repeat;
}.tabmenu ul {margin:0;padding:0;list-style-type: none;
border-bottom:solid 1px #816e59;
height:25px;}
.tabmenu li { overflow:hidden;
float:left;
text-align:center;
width:89px;
height:23px;
line-height:23px;
border-bottom:solid 1px #816e59;
padding-top:2px;
}.tabmenu ul .cli { overflow:hidden;
border-bottom:solid 1px #FFF;
border-left:solid 1px #816e59;
border-right:solid 1px #816e59;
border-top:solid 1px #816e59;
font-weight:bold;
cursor:pointer;
width:89px;
height:22px;
line-height:23px;
padding-top:2px;
}#tabcontent,#tabcontent2,#tabcontent3 {
padding: 5px 10px 18px;
}#tabcontent ul,#tabcontent2 ul ,#tabcontent3 ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden,#tabcontent2 .hidden,#tabcontent3 .hidden {display:none;}
.tabbox #tabcontent p,.tabbox #tabcontent2 p,.tabbox #tabcontent3 p{
line-height:20px;
color:#816e59;
text-indent:2em;
}
.tabbox #tabcontent p a,.tabbox #tabcontent2 p a,.tabbox #tabcontent3 p a{
color:#816e59;}
.tabbox #tabcontent p a:hover,.tabbox #tabcontent2 p a:hover,.tabbox #tabcontent3 p a:hover{
text-decoration:none;}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<!DOCTYPE html><html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>TAB切换</title>
<link rel="stylesheet" type="text/css" href="12.css" >
<script src="12.js"></script>
</head>
<body>
<div class="tabbox">
<div class="tabmenu">
<ul>
<li onmouseover="tabChange(this,'tabcontent')" >婺源东线景点</li>
<li onmouseover="tabChange(this,'tabcontent')" class="cli">李坑</li>
<li onmouseover="tabChange(this,'tabcontent')">江湾</li>
<li onmouseover="tabChange(this,'tabcontent')">汪口</li>
<li onmouseover="tabChange(this,'tabcontent')">江岭</li>
<li onmouseover="tabChange(this,'tabcontent')">晓起</li>
<li onmouseover="tabChange(this,'tabcontent')">庆源</li>
</ul>
</div>
<div id="tabcontent">
<ul class="hidden">
<li><a href="#">1111111111111111111111</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
</ul>
<ul name="tabul">
<img src="imges/index_38.jpg" width="321" height="99" /><h4>小桥流水人家 -- 李坑</h4>
<p><a href="#">李坑是一个以李姓聚居为主的古村落，距婺源县城12公里。李坑的建筑风格独特，是著名的徽派建筑。给人一种安静、祥和的气氛。李坑自古文风鼎盛、人才辈出。自宋至清，仕官富贾达百人，村里的文人留下传世著作达29部，南宋年间出...</a></p>
<p> </p>
</ul>
<ul class="hidden">
<li><a href="#">3333333333333333333333</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
</ul>
<ul class="hidden">
<li><a href="#">444444444444444444444444</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
</ul>
<ul class="hidden">
<li><a href="#">55555555555555555555555</a></li>
<li><a href="#">222222222xcC22222</a></li>
<li><a href="#">2222222f s f22222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
<li><a href="#">2222222222222222222222</a></li>
</ul>
<ul class="hidden">
<li><a href="#">6666666666666666666666</a></li>
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
</ul>
<ul class="hidden">
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
<li><a href="#">7777777777777777777</a></li>
</ul>
</div>
</div>
</canvas>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function tabChange(obj,id)
{ var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
for(i=0;i<arrayul.length;i++)
{
if(obj==arrayli[i])
{
arrayli[i].className = "cli";
arrayul[i].className = "";
}
else
{
arrayli[i].className = "";
arrayul[i].className = "hidden";
}
}
} |
浏览器效果：
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1784092
