注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

程序员驿站

淘宝店:http://shop106888457.taobao.com

 
 
 

日志

 
 

导航菜单tabcontrol (javascript+css)实现  

2013-05-30 14:45:47|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

不多说,先上效果图:

 

导航菜单tabcontrol (javascript+css)实现 - dingtao-wgs - 程序员驿站

 tab1

导航菜单tabcontrol (javascript+css)实现 - dingtao-wgs - 程序员驿站

 tab2

HTML源代码

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<META content=鼠标触发型导航菜单name=keywords>

<title>鼠标触发型导航菜单</title>

 

<style type="text/css">

.ww1 {width:500px;background-color:#D1E7FC;border-top:1px solid #9EC9EC;border-left:1px solid #9EC9EC;}

.ww1 td {border-right:1px solid #9EC9EC;border-bottom:1px solid #9EC9EC;height:28px;text-align:center;width:125px;font-size:12px;cursor:hand;}

.ww1 td.s {border-bottom:1px solid #FFFFFF;font-weight:bold;background-color:#FFFFFF;}

.ww2 {width:500px;border-right:1px solid #9EC9EC;border-top:none;border-left:1px solid #9EC9EC;border-bottom:1px solid #9EC9EC;font-size:12px;}

.ww2 a:link {color:#00007f;text-decoration:none;}

.ww2 a:visited {color:#800080;text-decoration:none;}

.ww2 a:hover {color:#00007f;text-decoration:underline;}

.ww2 a:active {color:#00007f;text-decoration:underline;}

.dis {display:block}

.undis {display:none}

</style>

<script>

function getNames(obj,name,tij){

var p = document.getElementById(obj);

var plist = p.getElementsByTagName(tij);

var rlist = new Array();

for(i=0;i<plist.length;i++)

{if(plist[i].getAttribute("name") == name){

rlist[rlist.length] = plist[i];}

}

return rlist;

}

function butong_net(obj,name){

var p = obj.parentNode.getElementsByTagName("td");

var p1 = getNames(name,"f","div");

for(i=0;i<p1.length;i++){

if(obj==p[i]){

p[i].className = "s";

p1[i].className = "dis";

}

else{

p[i].className = "";

p1[i].className = "undis";

}

}}

</script>

</head>

 

<body><table border="0" cellpadding="0" cellspacing="0" class="ww1">

 <tr>

   <td class="s" onmouseover="butong_net(this,'butong_net1')">网页特效库</td>

   <td onmouseover="butong_net(this,'butong_net1')">网页工具库1</td>

   <td onmouseover="butong_net(this,'butong_net1')">网页工具库2</td>

   <td onmouseover="butong_net(this,'butong_net1')">网页工具库3</td>

 </tr>

</table>

<table border="0" cellpadding="0" cellspacing="0" class="ww2">

 <tr>

   <td height="60" align="center">

     <div id=butong_net1>

      <div class=dis name="f">

  <a >Tab1</a> 

 </div>

      <div class=undis name="f">

<a >Tab2</a> 

 </div>

      <div class=undis name="f">

<a >Tab3</a> 

      </div>

      <div class=undis name="f">

<a >Tab4</a> 

      </div>

     </div>

   </td>

 </tr>

</table>

</body>

</html>


  评论这张
 
阅读(479)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018