点击(此处)折叠或打开

<!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-Type\" content=\"text/html; charset=gb2312\" />
<title>一款简洁漂亮的CSS滑动门特效-石家庄有机肥-接触角测定仪</title>
<style media=\"screen\" type=\"text/css\">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-image: url(\'http://www.CsrCode.cn/html/txdm_2/images/20101005/20101005001.gif\'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 用于控制显示与隐藏的css类 */
.normaltab { background-image:url(\'http://myjs.jz123.cn/img/20101005002.gif\'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab { background-image: url(\'http://myjs.jz123.cn/img/20101005003.gif\'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type=\"text/javascript\" language=\"javascript\">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
//本功能非常OK,兼容IE7,FF,IE6;http://www.jz123.cn/ [站长家园]
for(var i=1;i<=6;i++){g(\'tb_\'+i).className=\'normaltab\';g(\'tbc_0\'+i).className=\'undis\';}g(\'tbc_0\'+n).className=\'dis\';g(\'tb_\'+n).className=\'hovertab\';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class=\"w936\">
<div id=\"tb_\" class=\"tb_\">
<ul>
<li id=\"tb_1\" class=\"hovertab\" onmouseover=\"x:HoverLi(1);\">
Tab ①</li>
<li id=\"tb_2\" class=\"normaltab\" onmouseover=\"i:HoverLi(2);\">
Tab ②</li>
<li id=\"tb_3\" class=\"normaltab\" onmouseover=\"a:HoverLi(3);\">
Tab ③</li>
<li id=\"tb_4\" class=\"normaltab\" onmouseover=\"o:HoverLi(4);\">
Tab ④</li>
<li id=\"tb_5\" class=\"normaltab\" onmouseover=\"g:HoverLi(5);\">
Tab ⑤</li>
<li id=\"tb_6\" class=\"normaltab\" onmouseover=\"z:HoverLi(6);\">
Tab ⑥</li>
</ul>
</div>
<div class=\"ctt\">
<div class=\"dis\" id=\"tbc_01\">Tab ① 的内容<br /><img src=\"http://www.jz123.cn/xml/tool.gif\" /></div>
<div class=\"undis\" id=\"tbc_02\">Tab ② 的内容<br /><img src=\"http://www.jz123.cn/xml/22.jpg\" /></div>
<div class=\"undis\" id=\"tbc_03\">Tab ③ 的内容<br /><img src=\"http://www.jz123.cn/image/06la.jpg\" /></div>
<div class=\"undis\" id=\"tbc_04\">Tab ④ 的内容<br /><img src=\"http://www.jz123.cn/image/55l2.gif\" /></div>
<div class=\"undis\" id=\"tbc_05\">Tab ⑤ 的内容<br /><img src=\"http://www.jz123.cn/image/55l3.gif\" /></div>
<div class=\"undis\" id=\"tbc_06\">Tab ⑥ 的内容<br /><img src=\"http://www.jz123.cn/xml/tool.gif\" /></div>
</div>
</div>
<hr size=\"1\" noshade=\"noshade\" style=\"color:#064ca1;margin-top:30px;\" />
</body>
</html>

ITPub博客

一款简洁漂亮的CSS滑动门特效

最新文章