蛙蛙推荐：微软MSDN导航菜单演示（Javascript+CSS2）

zoukankan html css js c++ java

蛙蛙推荐：微软MSDN导航菜单演示（Javascript+CSS2）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>微软MSDN导航菜单</title>
<style type="text/css">

</style>
<script language="JavaScript" type="text/JavaScript">
//替换某个容器里指定元素的样式
function mhHover(tbl,idx,cls)
{
    var t,d; //定义两个变量
    //设置变量t为tb1的引用,不过if语句里那句我不知道有什么用,我记得getElementById函数需要参数的.
    //可能是测试浏览器特性的,根据浏览器特性来保证能正确获取tb1的引用
    if(document.getElementById)t=document.getElementById(tbl);
    else t=document.all(tbl);
    if(t==null)return;
    //设置d为tb1容器里的所有TD元素集合
    if(t.getElementsByTagName)d=t.getElementsByTagName("TD");
    else d=t.all.tags("TD");
    if(d==null)return;
    //判断获取TD元素集合的长度是否比idx还小,因为要设置下标为idx的元素的样式,所以必须要加这个判断
    if(d.length<=idx)return;
    //设置td集合里的第idx-1个元素的样式为cls,因为没两个内容单元格之间有个间隔单元格,所以调用该函数的时候要搞清楚到底要设置第几个单元格的样式.
    d[idx].className=cls;
}
</script>

</head>
<body>
<DIV id=msviLocalToolbar>
<TABLE height=19 cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD id=msviHomePageLink noWrap>
        <A href="http://www.microsoft.com/china/msdn/default.aspx" >MSDN 主页</A>
    </TD>
    <TD>
        <SPAN class=ltsep>|</SPAN>
    </TD>
    <TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 2, 'lt1')"
    onmouseout="mhHover('msviLocalToolbar', 2, 'lt0')" noWrap>
        <A href="http://www.microsoft.com/china/msdn/DeveloperCenter/default.mspx">开发中心</A>
    </TD>
    <TD>
        <SPAN class=ltsep>|</SPAN>
    </TD>
    <TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 4, 'lt1')"
    onmouseout="mhHover('msviLocalToolbar', 4, 'lt0')" noWrap>
        <A href="http://www.microsoft.com/china/msdn/library/default.mspx">技术资源库</A>
    </TD>
    <TD>
        <SPAN class=ltsep>|</SPAN>
    </TD>
    <TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 6, 'lt1')"
    onmouseout="mhHover('msviLocalToolbar', 6, 'lt0')" noWrap>
        <A href="http://www.microsoft.com/china/msdn/events/default.mspx">活动与培训</A>
    </TD>
    <TD>
        <SPAN class=ltsep>|</SPAN>
    </TD>
    <TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 8, 'lt1')"
    onmouseout="mhHover('msviLocalToolbar', 8, 'lt0')" noWrap>
        <A href="http://www.microsoft.com/china/msdn/download/default.mspx">下载中心</A>
    </TD>
    <TD>
        <SPAN class=ltsep>|</SPAN>
    </TD>
    <TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 10, 'lt1')"
    onmouseout="mhHover('msviLocalToolbar', 10, 'lt0')" noWrap>
        <A href="http://www.microsoft.com/china/community/developer/default.mspx">开发者社区</A>
    </TD>
    <TD>
        <SPAN class=ltsep>|</SPAN>
    </TD>
    <TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 12, 'lt1')"
    onmouseout="mhHover('msviLocalToolbar', 12, 'lt0')" noWrap>
        <A  href="http://www.microsoft.com/downloads/search.aspx?displaylang=zh-cn&categoryid=10">在线资源</A>
        </TD>
    <TD>
        <SPAN class=ltsep>|</SPAN>
    </TD>
    <TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 14, 'lt1')"
    onmouseout="mhHover('msviLocalToolbar', 14, 'lt0')" noWrap>
        <A href="http://msdn.microsoft.com/worldwide.aspx" >MSDN 全球站点</A>
    </TD>
    <TD width="100%"></TD>
    </TR>
    </TBODY>
    </TABLE>
    </DIV>
</body>
</html>

不了解CSS和HTML里的边框，不定，宽度，填充的概念的可以参考下面的图

查看全文

相关阅读:
javascript之数组去重方法
 经典问题之爬楼梯
 javascript之事件循环机制
 javascript之闭包
 javascript之动态改变this上下文
 块级元素的垂直居中对齐
 js数组对象
 javascript-冒泡法排序
 javascript-数组
 javascript-循环

原文地址：https://www.cnblogs.com/onlytiancai/p/192688.html