学电脑,学计算机 | 手机访问 | 加入收藏 | 设为首页 | RSS
当前位置:首页 > 网页制作 > HTML/CSS > 正文

js+css制作选项卡特效

发布时间:2009-09-28 08:29:00  来源:电脑技术学习网
【摘要】: 昨天有朋友让我做一个选项卡,兼容IE及FF等主流浏览器。今天上午抽空搞定,现把代码放出来,有些细节地方可能还需要自己做一下调整,我就不修改了,因为涉及到个人的皮肤样式。

  昨天有朋友让我做一个选项卡,兼容IE及FF等主流浏览器。今天上午抽空搞定,现把代码放出来,有些细节地方可能还需要自己做一下调整,我就不修改了,因为涉及到个人的皮肤样式。

代码如下:

<!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> <link rel="stylesheet" href="http://htwy.org.ru/skins/wait/global.css" type="text/css" /> <link rel="stylesheet" href="http://htwy.org.ru/skins/wait/layout.css" type="text/css" /> <link rel="stylesheet" href="http://htwy.org.ru/skins/wait/typography.css" type="text/css" /> <link rel="stylesheet" href="http://htwy.org.ru/skins/wait/link.css" type="text/css" /> <style type="text/css"> /* 选项卡关键属性 */ .sidebar { float:left; padding:0; margin:0; text-align:left; } .sidebar ul { list-style:none; padding:0; margin:0; text-align:center } .sidebar li { float:left; height:24px; margin:0; padding:0 3px; background:#fff; } .sidebar a { color:#000;font-size:12px;} .sidebar a:hover { color:#f60; } .sidebar .active a { color:#f00; } .endContent { margin-top:6px; height:230px; font-size:12px; line-height:180%;} .endContent a { float:left; height:24px; } </style> <script type="text/javascript"> var D=new Function('obj','return document.getElementById(obj)'); function showDiv(sobj,num){ for(var id = 1;id<=3;id++){ try{ var ss = sobj + id; var nss = sobj + "nav" + id; if(id==num){ D(ss).style.display="block" D(nss).className="active" }else{ D(ss).style.display="none" D(nss).className="" } }catch(e){}; } } </script> </head> <body> <div id="Side_mokuai" class="sidepanel"><h4 class="Ptitle">Aspect/看点</h4><div class="Pcontent"> <div class="sidebar"> <ul> <li id="leftnav1" class="active"><a href="javascript:void(0);" onmouseover="javascript:showDiv('left',1);" target="_self">|随机日志|</a></li> <li id="leftnav2"><a href="javascript:void(0);" onmouseover="javascript:showDiv('left',2);" target="_self">|热门日志|</a></li> <li id="leftnav3"><a href="javascript:void(0);" onmouseover="javascript:showDiv('left',3);" target="_self">|海天推荐|</a></li> </ul> </div> <div style="clear:both"></div> <div class="endContent"> <div id="left1" style="display:block;"> <a class="sideA" href="#">刚充值了空间</a> <a class="sideA" href="#">命中注定的执着—《贫民窟的百万富翁》</a> <a class="sideA" href="#">一个空间绑定多个域名</a> <a class="sideA" href="#">blog终于成功上线</a> <a class="sideA" href="#">斯巴达300勇士</a> <a class="sideA" href="#">再换空间了</a> <a class="sideA" href="#">免流量费的中国移动官方wap手机报</a> <a class="sideA" href="#">十二星座365天生日性格大全</a> <a class="sideA" href="#">明天回家喽</a> <a class="sideA" href="#">郁闷,换空间了</a> </div> <div id="left2" style="display:none;"> <a class="sideA" href="#">《越狱》电影特别篇26号播出,剧中将揭秘迈克死因</a> <a class="sideA" href="#">《南京!南京!》DVD版下载</a> <a class="sideA" href="#">浩方看不见对方,房间速度显示noping</a> <a class="sideA" href="#">GoogleEarth十大神奇发现(更新全部坐标)...</a> <a class="sideA" href="#">[隐藏日志]</a> <a class="sideA" href="#">《X战警前传:金刚狼》DVD版下载,非前段时间泄露...</a> <a class="sideA" href="#">永久免费的GOOGLE版瑞星</a> <a class="sideA" href="#">看加密或者对好友可见的QQ相册</a> <a class="sideA" href="#">萨顶顶,多种元素的融合,带我们脱离城市的喧嚣</a> <a class="sideA" href="#">支持外链的google网盘</a> </div> <div id="left3" style="display:none;"> <a class="sideA" href="#">Hotspot Shield免费的翻墙利器</a> <a class="sideA" href="#">免费的DNS解析</a> <a class="sideA" href="#">支持外链的google网盘</a> <a class="sideA" href="#">超强的ARK工具XueTr</a> <a class="sideA" href="#">ophcrack快速猜解xp系统密码</a> <a class="sideA" href="#">免费的邮件到达短信通知</a> <a class="sideA" href="#">可外链的好网盘</a> <a class="sideA" href="#">免费天气预报</a> <a class="sideA" href="#">推荐几首中文歌</a> <a class="sideA" href="#">英文歌曲推荐</a> </div> </div> </div> <div class="Pfoot"></div> </div> </body> </html>