Tabsスライド表示
20554 ワード
html
<!
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
>
<
title
></
title
>
<
script type
=
"
text/javascript
"
src
=
"
js/jquery-1.3.2-vsdoc.js
"
></
script
>
<
script src
=
"
js/jquery-1.3.2.js
"
type
=
"
text/javascript
"
></
script
>
<script src="js/js/tabs.js" type="text/javascript"></script>
<link type="text/css" href="css/tabs.css" rel="Stylesheet" />
</
head
>
<
body
>
<
div
class
=
"
tab
"
>
<
p
>
<
span id
=
"
tab1
"
>
</
span
>
<
span id
=
"
tab2
"
>
</
span
>
<
span id
=
"
tab3
"
>
</
span
>
</
p
>
<
ul
class
=
"
tab1
"
>
<
li
><
a href
=
"
http://www.163.com
"
>
</
a
></
li
>
<
li
>
</
li
>
<
li
>
</
li
>
</
ul
>
<
ul
class
=
"
tab2
"
>
<
li
>
</
li
>
<
li
>
</
li
>
</
ul
>
<
ul
class
=
"
tab3
"
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
<
li
>
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
tabs.js
$(function() {
$(
"
.tab span:first
"
).addClass(
"
current
"
);
$(
"
.tab ul:not(:first)
"
).hide();
$(
"
.tab span
"
).mousemove(function() {
$(
"
.tab span
"
).removeClass(
"
current
"
);
$(
this
).addClass(
"
current
"
);
$(
"
.tab ul
"
).hide();
$(
"
.
"
+
$(
this
).attr(
"
id
"
)).show();
})
})
tabs.css
.tab{ background
-
color:#fafafa; margin:5px 8px; padding:5px 10px;}
.tab p{ border
-
bottom:1px solid #cccccc; font
-
weight:bold ; padding:0px 10px 2px;}
.tab p span{ background
-
color:#efefef; border:1px solid #cccccc; cursor:pointer; margin
-
right:6px; padding:2px 5px;}
.tab li{ border:1px
double
#cccccc; padding
-
bottom:3px; margin:5px
0
}
.tab .tab2,.tab .tab3{ display:none;}
.tab p span.current{ background
-
color:#fafafa; border
-
bottom
-
color:#fafafa;}