一款当前流行的选项卡效果(兼容IE和火狐）
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><br/><head><br/><meta http-equiv="Content-Language" content="zh-cn" /><br/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br/><meta name="robots" content="all" /><br/><meta name="author" content="" /><br/><meta name="Copyright" content="copyright (c) " /><br/><title> 一款当前流行的选项卡效果(兼容IE和火狐)</title><br/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br/><style type="text/css"><br/>h4,div,ul,li,span{ padding:0px; margin:0px}<br/>body {<br/> font-size:12px<br/>}<br/>/* 最外面DIV的样式 */<br/>#slidingBlock {<br/> width:600px;over-flow:hidden<br/>}<br/>#slidingBlock a{ color:#000<br/>}<br/>#slidingBlock h4 {<br/> float:left;width:82px;height:24px;line-height:25px;text-align:center;font-size:14px;over-flow:hidden; margin-right:10px<br/>}<br/>#slidingBlock h4.menuNo {<br/> font-weight:normal;background-color:#5e3134; color:#fff;border-left:#c2c4c3 solid 1px; border-top:#c2c4c3 solid 1px; border-right:#c2c4c3 solid 1px<br/>}<br/>#slidingBlock h4.menuOn { color:#5e1413<br/> font-weight:bold;<br/> background-color:#f3f3f3;<br/> border-left:#c2c4c3 solid 1px;<br/> border-top:#c2c4c3 solid 1px;<br/> border-right:#c2c4c3 solid 1px;<br/><br/>}<br/>#slidingBlock DIV.slidingList_none {<br/> display:none<br/>}<br/>#slidingBlock DIV.slidingList {<br/> 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<br/>}<br/>#slidingBlock DIV.slidingList ul { <br/> margin:0px;padding:0px; list-style:none; <br/>}<br/>#slidingBlock DIV.slidingList li {<br/> width:290px;<br/> float:left;<br/> height:28px;<br/> line-height:28px;<br/> font-size:14px;<br/> text-indent:20px;<br/> background-image:url(http://www.xunzou.com/images/ico.jpg);<br/> background-repeat: no-repeat;<br/> background-position: 5px;<br/>}<br/><br/></style><br/></head><br/><br/><body><br/><br/><div id="slidingBlock"><br/> <script language="javascript"><br/> function switchmodTag(modtag,modcontent,modk) {<br/> for(i=1; i <6; i++) {<br/> if (i==modk) {<br/> document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}<br/> else {<br/> document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}<br/> }<br/> }<br/></script><br/> <h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();"><br/> 雅思阅读</h4><br/> <h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();"><br/> 雅思口语</h4><br/> <h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();"><br/> 雅思听力</h4><br/> <h4 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','4');this.blur();"><br/> 雅思写作</h4><br/> <h4 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','5');this.blur();"><br/> 雅思培训</h4><br/> <div class="slidingList" id="slidingList1"><br/> <ul><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息</a></li><br/> <li ><a href="http://www.xunzou.com">第一个的信息第一个的信息</a></li><br/> <br/> <br/> <br/> </ul><br/> </div><br/> <div class="slidingList_none" id="slidingList2"><br/> <ul><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息</a></li><br/> <li > <a href="http://www.xunzou.com">第二个的信息第二个的信息</a></li><br/> <br/> </ul><br/> </div><br/> <div class="slidingList_none" id="slidingList3"><br/> <ul><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <br/> </ul><br/> </div><br/> <div class="slidingList_none" id="slidingList4"><br/> <ul><br/> <li> <a href="http://www.xunzou.com">第4个的信息第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第4个的信息第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <br/> </ul><br/> </div><br/> <div class="slidingList_none" id="slidingList5"><br/> <ul><br/> <li> <a href="http://www.xunzou.com">第5个的信息第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第5个的信息第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> <li> <a href="http://www.xunzou.com">第三个的信息第三个的信息</a></li><br/> </ul><br/> </div><br/></div><br/><br /><br/><br /><br/><br/><br /><br/><br /><br/><br /><br/><br /><br/>本文转载自www.xunzou.com（JS特效学院）<br/></body><br/><br/></html><br/>
0 条留言
我要留言