<!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-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content="" />
<meta name="Copyright" content="copyright (c) " />
<title> 一款当前流行的选项卡效果(兼容IE和火狐)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
h4,div,ul,li,span{ padding:0px; margin:0px}
body {
font-size:12px
}
/* 最外面DIV的样式 */
#slidingBlock {
width:600px;over-flow:hidden
}
#slidingBlock a{ color:#000
}
#slidingBlock h4 {
float:left;width:82px;height:24px;line-height:25px;text-align:center;font-size:14px;over-flow:hidden; margin-right:10px
}
#slidingBlock h4.menuNo {
font-weight:normal;background-color:#5e3134; color:#fff;border-left:#c2c4c3 solid 1px; border-top:#c2c4c3 solid 1px; border-right:#c2c4c3 solid 1px
}
#slidingBlock h4.menuOn { color:#5e1413
font-weight:bold;
background-color:#f3f3f3;
border-left:#c2c4c3 solid 1px;
border-top:#c2c4c3 solid 1px;
border-right:#c2c4c3 solid 1px;
}
#slidingBlock DIV.slidingList_none {
display:none
}
#slidingBlock DIV.slidingList {
width:600px; margin:0px;padding:0px;height:150px; border-left:#c2c4c3 solid 1px; border-right:#c2c4c3 solid 1px;border-bottom:#c2c4c3 solid 1px; border-top:#c2c4c3 solid 1px; background-color:#f3f3f3; clear:both
}
#slidingBlock DIV.slidingList ul {
margin:0px;padding:0px; list-style:none;
}
#slidingBlock DIV.slidingList li {
width:290px;
float:left;
height:28px;
line-height:28px;
font-size:14px;
text-indent:20px;
background-image:url(http://www.93you.com/images/ico.jpg);
background-repeat: no-repeat;
background-position: 5px;
}
</style>
</head>
<body>
<div id="slidingBlock">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1; i <6; i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}
else {
document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}
}
}
</script>
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
雅思阅读</h4>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
雅思口语</h4>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
雅思听力</h4>
<h4 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','4');this.blur();">
雅思写作</h4>
<h4 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','5');this.blur();">
雅思培训</h4>
<div class="slidingList" id="slidingList1">
<ul>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息</a></li>
<li ><a href="http://www.93you.com">第一个的信息第一个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息</a></li>
<li > <a href="http://www.93you.com">第二个的信息第二个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList4">
<ul>
<li> <a href="http://www.93you.com">第4个的信息第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第4个的信息第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList5">
<ul>
<li> <a href="http://www.93you.com">第5个的信息第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第5个的信息第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
<li> <a href="http://www.93you.com">第三个的信息第三个的信息</a></li>
</ul>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
本文转载自www.93you.com
</body>
</html>
IP卡
狗仔卡
发表于 2008-11-20 16:17:24
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
发表于 2009-2-28 09:55:53
