当前位置:起点学习辅导网 →培训频道 → 电脑知识学习 → 网页制作 → HTML与CSS教程→js+css制作选项卡特效

js+css制作选项卡特效

01-01 19:54:44浏览次数:491次栏目：HTML与CSS教程

标签：html与css教程,css教程,html网页设计教程,暂无联系方式 js+css制作选项卡特效,
昨天有朋友让我做一个选项卡，兼容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>

，js+css制作选项卡特效

《js+css制作选项卡特效》相关文章

·上一篇：始终让 Firefox 显示滚动条
·下一篇：HTML&CSS&JS兼容树

给资讯打分：

网友评论：