CSS+JS 仿MSN TAB选项卡
CSS+JS 仿MSN TAB选项卡
代码
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head
>
<
meta http
-
equiv
=
"
Content-Type
"
content
=
"
text/html; charset=utf-8
"
/>
<
title
>
无标题文档
</
title
>
<
head
>
<
title
>
无标题文档
</
title
>
<
style
>
*
{list
-
style
-
type:none; font
-
size:12px; text
-
decoration:none; margin:
0
; padding:
0
;}
.tab{ margin:20px; width:244px; height:200px; overflow:hidden; border:1px #AACCEE solid;}
.tab_b{ overflow:hidden; margin:5px; }
.menu {overflow:hidden; }
.menu li{ display:block;
float
:left; display: list
-
item; text
-
align:center; width:60px; background
-
color:#EDF4FC;line
-
height:20px; border
-
bottom:1px #AACCEE solid;border
-
right:1px #AACCEE solid; }
.menu li a{ display:block;}
.menu_d{border
-
bottom:1px #FFFFFF solid;background
-
color:#FFFFFF; }
.tab ul li.aaa
{
background: #FFFFFF;
border
-
bottom:0px #FFFFFF solid;
}
</
style
>
</
head
>
<
body
>
<
script language
=
"
javascript
"
>
function tabs(n)
{
var len
=
4
;
for
(var i
=
1
; i
<=
len; i
++
)
{
document.getElementById(
'
tab_a
'
+
i).style.display
=
(i
==
n)
?
'
block
'
:
'
none
'
;
document.getElementById(
'
tab_
'
+
i).className
=
(i
==
n)
?
'
aaa
'
:
'
none
'
;
}
}
</
script
>
<
div
class
=
"
tab
"
>
<
ul
class
=
"
menu
"
id
=
"
menutitle
"
>
<
li id
=
"
tab_1
"
class
=
"
aaa
"
><
a href
=
"
javascript:void(0)
"
onmouseover
=
"
tabs('1');
"
>
新闻
</
a
></
li
>
<
li id
=
"
tab_2
"
><
a href
=
"
javascript:void(0)
"
onmouseover
=
"
tabs('2');
"
>
生活
</
a
></
li
>
<
li id
=
"
tab_3
"
><
a href
=
"
javascript:void(0)
"
onmouseover
=
"
tabs('3');
"
>
家居
</
a
></
li
>
<
li id
=
"
tab_4
"
><
a href
=
"
javascript:void(0)
"
onmouseover
=
"
tabs('4');
"
>
旅游
</
a
></
li
>
</
ul
>
<
div
class
=
"
tab_b
"
id
=
"
tab_a1
"
style
=
"
display:block;
"
>
本地国内国际新闻
<
br
/>
新浪
</
div
>
<
div
class
=
"
tab_b
"
id
=
"
tab_a2
"
style
=
"
display:none;
"
>
网易 本土生活
</
div
>
<
div
class
=
"
tab_b
"
id
=
"
tab_a3
"
style
=
"
display:none;
"
>
舒适居家房地产信息
</
div
>
<
div
class
=
"
tab_b
"
id
=
"
tab_a4
"
style
=
"
display:none;
"
>
出行 度假
</
div
>
</
div
>
</
body
>
</
html
>
