|
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,#tabcontent
2
,#tabcontent
3
{
padding
:
5px
10px
18px
;
}
#tabcontent ul,#tabcontent
2
ul ,#tabcontent
3
ul {
margin
:
0
;
padding
:
5px
;
list-style-type
:
none
;}
#tabcontent .
hidden
,#tabcontent
2
.
hidden
,#tabcontent
3
.
hidden
{
display
:
none
;}
.tabbox #tabcontent p,.tabbox #tabcontent
2
p,.tabbox #tabcontent
3
p{
line-height
:
20px
;
color
:
#816e59
;
text-indent
:
2em
;
}
.tabbox #tabcontent p a,.tabbox #tabcontent
2
p a,.tabbox #tabcontent
3
p a{
color
:
#816e59
;}
.tabbox #tabcontent p a:hover,.tabbox #tabcontent
2
p a:hover,.tabbox #tabcontent
3
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
