JS滑动门效果

最新推荐文章于 2019-11-23 12:33:51 发布

ueaner

最新推荐文章于 2019-11-23 12:33:51 发布

阅读量159

点赞数

分类专栏： html 文章标签： VB 游戏 VC++ Delphi ASP

本文链接：https://blog.csdn.net/Ueaner/article/details/83633920

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>滑动门效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{font:12px "宋体";margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.TabADS{width:160px;}
.TabADS ul{width:160px;height:24px;background:#fff;}
.TabADS li{width:40px;float:left;height:18px;padding:6px 0 0 0;background:url(http://dl.iteye.com/upload/picture/pic/63606/79be4821-1960-32d0-8f2f-72a0e9d4abb1.gif) no-repeat right #e4e4e4;text-align:center;color:#333;cursor:pointer;}
.TabADS .TasADSOn{background:url(http://ueaner.iteye.com/upload/picture/pic/63604/1177d8b9-cbf8-3fd2-9eda-0a9cf77958f7.gif) no-repeat right #ffe4a6;text-align:center;color:#333;font-weight:bold;cursor:pointer;}
.TabADSCon{background:#FFD77B;padding:5px;width:150px;}
.TabADSCon li{text-align:left;line-height:20px;}
</style>
<script language="javascript" type="text/javascript">
function Show_TabADSMenu(tabadid_num,tabadnum){
	for(var i=0;i<4;i++){document.getElementById("tabadcontent_"+tabadid_num+i).style.display="none";}
	for(var i=0;i<4;i++){document.getElementById("tabadmenu_"+tabadid_num+i).className="";}
	document.getElementById("tabadmenu_"+tabadid_num+tabadnum).className="TasADSOn";
	document.getElementById("tabadcontent_"+tabadid_num+tabadnum).style.display="block";
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="TabADS">
  <ul>
    <li id="tabadmenu_10" onmouseover="setTimeout('Show_TabADSMenu(1,0)',200);" class="TasADSOn">VB</li>
    <li id="tabadmenu_11" onmouseover="setTimeout('Show_TabADSMenu(1,1)',200);">ASP</li>
    <li id="tabadmenu_12" onmouseover="setTimeout('Show_TabADSMenu(1,2)',200);">PHP</li>
    <li id="tabadmenu_13" onmouseover="setTimeout('Show_TabADSMenu(1,3)',200);">cgi</li>
  </ul>
</div>
<div class="TabADSCon">
  <ul id="tabadcontent_10">
    <li><a href="#" target="_blank">基于VC的推箱子游戏</a></li>
  </ul>
  <ul id="tabadcontent_11" style="display:none;">
    <li><a href="#" target="_blank">VB批量重命名程序</a></li>
  </ul>
  <ul id="tabadcontent_12" style="display:none;">
    <li><a href="#" target="_blank">VC++五子棋游戏进阶版源码</a></li>
  </ul>
  <ul id="tabadcontent_13" style="display:none;">
    <li><a href="#" target="_blank">精美多模式DELPHI闹钟程序</a></li>
  </ul>
</div>
</body>
</html>

ueaner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS滑动门效果

[code="html"]滑动门效果*{font:12px "宋体";margin:0;padding:0;}ul{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}.TabADS{width:160px;}.TabADS ul{width:160px;...
复制链接

扫一扫

专栏目录