选择DST！支持DST！

查看完整版本: 自己写的选项卡效果代码。

Flash菲 2007-7-30 07:55

自己写的选项卡效果代码。

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">0s4G:_a8uhy0a
<html xmlns="http://www.w3.org/1999/xhtml">
WcT{8}e <head>
Dn/m Ce <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />yJ#C1d/jK7F
<title>无标题文档-SH!</title>9utSF-M2k*gap
<style type="text/css">
VwDH'}6p@{G#t .box {
6OI`D^,Y H6S ^         border-top: 1px solid #e3e3e3;Iy O1WhF*Z
        border-right: 1px solid #e3e3e3;
X.~ M8q]*Gt\3K         border-bottom: 1px solid #e3e3e3;*h [i?2XXyMN
        height: auto;`5vm2xw/B4E\M
        width: 333px;5eb|(CS$GW#lKm-|7P
}(c-rUd,H/@A `
.tabon {
"v4r,m+qoAF4KR,Y6Q         float:left;
5\ Oo[f&V:B(L         background-color: #ffffff;;|$~xJv(TNC
        color: #DB5B6F;(R }b:z:`'PV |/i6|D
        font-weight: bold;
_ O*DF"c7e&t5S4f9O         width:110px;
"X k(OV0esVb g         height:auto;T6S.|/a}&c
        border-left: 1px solid #e3e3e3;Bg7YCJ4oE)Z7H t
        cursor: pointer;3j,t&dM}|ct
}Q:[_eF lt J

3{)Vg5Fdhn l .taboff {k6{'jkL3`&S
        background-color: #f5f5f5;Vm.}9`1g3F tbs4[8b
        border-left: 1px solid #e3e3e3;
?z8rix@:CU Y         border-bottom: 1px solid #e3e3e3;5x Z'T]a&Z3?f0m
        color: #666666;4|^jxt2H
        font-weight: bold;
%|to!AU@tW         width:110px;NkN_'@E"zM
        height:auto;
q,S p,O/u+Pz6}4s         float:left;
8Y/rcBB:A
;HYm9|}$np[t }
X LVd`2d0S J.S/a"o .tdbody {B)j Z U0?u
        line-height:50px;
OOb;Ao N yY         background-color: #ffffff;
R@'Ip3RU~:Zk         width:331px;MW m ehS7gI{8}X
        border-left-width: 1px solid  #e3e3e3;
_.o@Em[&cm5_ J }]U.^x z]@&er!p S/H
</style> u^[ n%OL7YCZr5D
<script type="text/javascript">P~qR.h
function view(a) { L l l?0BK'O
document.getElementById('d1').style.display='none'; q0Sk)E ^D5H+?H*~
document.getElementById('d2').style.display='none';
A|rp[0nr-w document.getElementById('d3').style.display='none';8z"B&v$F(X*J W8G9b
*SUB:u:{:EE7j
document.getElementById('d'+a).style.display='block';
,BN5mX2AC WYM0k9Au$~
document.getElementById('c1').className='taboff';
U1d6X[.S5\y&G document.getElementById('c2').className='taboff';q)O!aPh,f
document.getElementById('c3').className='taboff';7X#M2g W/NH3w

9\.pI2J1o ?"DN;?R document.getElementById('c'+a).className='tabon';Xl o'v b6u}7r v
} ~6vzkk|:{
</script>
xuR+n3s </head>
dg5D*r]B)W1b$O7Y <body>
uMgNvC <div class="box">
?5e q.xg ]J0k(v$]-I <div  class="tabon" id="c1" onmouseover="javascript:view(1);"><a href="#">1</a></div>$R+Df&L.| A^.mw(s
<div class="taboff" id="c2"  onmouseover="javascript:view(2);"><a href="#">2</a></div>q2AJ/pY
<div class="taboff" id="c3" onmouseover="javascript:view(3);"><a href="#">3</a></div>
Z6qma/E)^ y <div style="clear:both"></div>
$U5Q+q4N!T!nN` <div class="tdbody" id="d1" style="display:block"><a href="#">女装</a></div>
Z2q'Y[\.m.P <div class="tdbody" id="d2" style="display:none"><a href="#">男装</a></div>
&S/p!L%hq!O*^ <div class="tdbody" id="d3" style="display:none"><a href="#">运动</a></div>2Z a"G3|1H{z
</div>E.d[n[!hD;]
</body> ]+{(K}2F9zl
</html>[/code]

韩人 2007-7-30 10:02

嘿嘿.等下老大又会说你代码不简洁.

Flash菲 2007-7-30 20:19

不整洁难道不能修改么.

asd1 2007-7-30 20:38

嗯，要紧的是可以运作，过后还可以修整编码的哦。。。 :)

缘亦如此 2007-8-4 11:31

我在找个鼠标响应延时的，不然如果页面中有太多的这样的栏目，鼠标一不小心就触动上了就得换，这样造成的误操作太多，像网易的那个就不错，鼠标放上去一定的时间才转换，小菲给整下来吧:lol

Flash菲 2007-8-4 15:46

这个是俺写的...不是扣的..

wxyuan90 2007-8-4 22:01

[code]<script type="text/javascript">hw(C`)iL*O,e
var now=1;
8JzQ[Q dB;y[ function next() {
'zv-S,\&}!r$A var t;
W(e Xa aR9r8G5` t = now + 1;0bY0`t@\
if(t == 4) t = 1;?5Nln`8H O$d-a
view(t);
k?]%a9YU-d }
6Nz%F0h$NISz4c function view(a) {
#Q){[*Xr v:C if(now == a) return;,S0P;jR,\$U-qrZD
document.getElementById('c'+now).className='taboff';
!ao r9kk document.getElementById('d'+now).style.display='none';/R0W'X_5B G;V
now = a;*p QW(L7[^v)z/@
document.getElementById('d'+now).style.display='block';}U$F1x/v W.@
document.getElementById('c'+now).className='tabon';
}$e U3BE CZ}1l }
0H~ gD:auZ] window.setInterval('next()', 3000)
_/dc"fr,hwFD </script>[/code]C9YWZK OEe
]k,S'r8B\G
[[i] 本帖最后由 wxyuan90 于 2007-8-4 22:04 编辑 [/i]]

wxyuan90 2007-8-4 22:36

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">3i"sM PL;c8V B/A
<html xmlns="http://www.w3.org/1999/xhtml">n.G!~1G}!_A~
<head>
MuB%{QK"uU&g <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
LM0Y I~/V`G <title>无标题文档-SH!</title>DI"\U DzC
<style type="text/css">
7? a*e]6|Qc .box {
:N.[ s Se;Y4ZiHp         border-top: 1px solid #e3e3e3;
!NSX Ui(k }-q%|x         border-right: 1px solid #e3e3e3;%n H&mK4bs@$vo
        border-bottom: 1px solid #e3e3e3;
.n*l3{8Sw         height: auto;
Jet#~b         width: 333px;
6BxB|,XE0D }i2z%X$sE
.tabon {Z`a_*z$GJ7yz
        float:left;
$x0m zQ g cNV3k         background-color: #ffffff;
)L5Vv p0V/a!O^         color: #DB5B6F;
"c,L2uAWm4T/Ld6l         font-weight: bold;P:ug4b9u0{i'w8r
        width:110px;
n7I1O0O|g VSe         height:auto;Ku}4b:s;Z7yd
        border-left: 1px solid #e3e3e3;dl/Uu3\@2~2G
        cursor: pointer;
7I|F5Uy\Plx }w&R4u]"l
:you6Bs3f o
.taboff {;u]wv"Gr+Gz
        background-color: #f5f5f5;g[/D?3lGx!c
        border-left: 1px solid #e3e3e3;r:hc9Hv ?G
        border-bottom: 1px solid #e3e3e3;1Cb'o$k,@h2xo}
        color: #666666;mG.eG0{&k~1@+o9`"t
        font-weight: bold;2f-\ ?UGSZzp#\,C
        width:110px;]F&Yrn4U.j"l
        height:auto; VJ UdtOo
        float:left;
EBk2?nGh
"GaX2QdH7PTNj7v E }
6gLyr/@+R .tdbody {
_2@'x@_ C         line-height:50px;
XI6f'z6i,KbHm         background-color: #ffffff;j5b+ubs3Q]
        width:331px;tB q P1g6^2u
        border-left-width: 1px solid  #e3e3e3;
a av ['M5B{L&q }
2_)zm9kH0T a$C </style>
$YtB'a f vp3E~ <script type="text/javascript">|[C4w%} k,G)?
var now=1;//现在选项卡
8Q4LV no%Tq var _max=3;//选项卡数目
gMf8}lB{ var mjj;//interval计时器，用于自动跳*GfyKy
var yjj;//Timeout计时器，用于“蓄力”A,[%D0a-c0fCQ
/*\9ym%ew$k6W{_^
a=setInterval(语句字符串， 毫秒数)#bHo9N gi&U"l.R9c H8Z
每隔毫秒数执行语句H {3X,LUPa!q~(z
clearInterval(a)4[9RN5dh6Zaj
停止上述执行
(WjD6D.wi!q b=setTimeout(语句字符串， 毫秒数)CR^ g} _5B]"PM
毫秒数之后执行语句
?%a.H x4O,ot3S b Y*y clearTimeout(a)
"k y*};g7X"t'R&U)\X 停止上述执行
s\Lf min */ k W7nZ D%j7wy
function next() {//跳转到下一个选项卡*kz6G(_ P xx2Q
var t;k8w+[}G4]jR
t = now + 1;
'H/f-[7uO[-w:x if(t > _max) t = 1;
T(IvR k} qU`O%tt view(t);
0{Hd)R$w.@b-K&k }
3{ @kId!A2yej^#D5? function view(a) {//跳转到指定选项卡(d X-aS2^6BT |
if(now == a) return;//如果已经是指定选项卡
__qG[ Q,o3q document.getElementById('c'+now).className='taboff';//原有选项卡
D ^-?8GlW2l document.getElementById('d'+now).style.display='none';
k&jR(hi9v%D-Xv now = a;
+py)ui"] Y\ document.getElementById('d'+now).style.display='block';//现在选项卡-YM9\%rH\
document.getElementById('c'+now).className='tabon'; qy+@T9Qgx Ju8mje\
}*yVW/jw

G5N5X8j? function start(){4C*nu2qM7f2]
        mjj=setInterval('next()', 3000);//3秒一跳1v+MO'o'I'_k[
}
Pi r8X&M z} function stop(){
\h8hkY`c W0U'M4L         clearInterval(mjj);//3秒不跳
^u!}eS!]g[ }Js-VDB:x5L#c
*F.y5P3tX?w{
function xl(a){//蓄力半秒
3S)_iJ+N T ^9l         yjj=setTimeout("view("+a+")", 500);cq*g I-QK8eG$o
}-WbV3j I:D.vOee*x
start();
\6E8gB/q7u#}D!rk&h'n </script>
T8U1[5l/\X9[
;z\ PM{ </head>-B(y.Z)\XB1E
<body>
SW;idKk4~!@ <div class="box" onmouseover='stop();' onmouseout="start();">kK0EoL+^Z
<div  class="tabon" id="c1" onmouseover="xl(1);" onmouseout="clearTimeout(yjj)"><a href="#">1</a></div>\Oh `K'm
<div class="taboff" id="c2" onmouseover="xl(2);" onmouseout="clearTimeout(yjj)"><a href="#">2</a></div>
&pud z WO <div class="taboff" id="c3" onmouseover="xl(3)" onmouseout="clearTimeout(yjj)"><a href="#">3</a></div>F;xB:L9[8h A
<div style="clear:both"></div> c&c1w&|KCL9@
<div class="tdbody" id="d1" style="display:block"><a href="#">女装</a></div>
}W YGY*n;a:C ~q"dn u <div class="tdbody" id="d2" style="display:none"><a href="#">男装</a></div> Tz8HyVB
<div class="tdbody" id="d3" style="display:none"><a href="#">运动</a></div>1zfY&BD
</div>mdB3d)eo
</body>Ls$X:h6K-st/B@
</html>8W:z6EEL;uN
[/code]
[MPnI W4cU"S aY'C];V%j$|
[[i] 本帖最后由 wxyuan90 于 2007-8-4 22:37 编辑 [/i]]
页: [1]
查看完整版本: 自己写的选项卡效果代码。