自定义document.getElementsByName() 兼容IE Firfox

原创于 2011-07-30 14:51:23 发布 · 798 阅读
0 ·
本内容遵循CC 4.0 BY-SA版权协议
收录于
网站设计与实现
ASP.NET应用与开发
Javascript应用技巧
本文详细介绍了零度建站系统中左侧菜单的功能实现，包括网站后台多栏目组、多标签控制等应用场景，提供了HTML、CSS、JavaScript代码示例。
From： http://bbs.0duinfo.com/showtopic-32-1.aspx
应用场景：
1、网站后台多栏目组
2、多标签控制
效果及代码图：
<!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>
        <title>
            左侧菜单 LdCMS!NT 零度建站系统
        </title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <link href="Css/skin.css" rel="stylesheet" type="text/css" />
        <link title="零度信息港" href="http://www.0duinfo.com/" rel="index" />
        <base target="main" />
        <script type="text/javascript">
            if (top.location == self.location) {
                alert("请不要非法操作！");
                top.location = "LdLogin.aspx";
            }
            //获取标签集，兼容IE、Firfox
            function fGetElementsByName(sTag, sName) {
                //非IE
                var objIeTags = document.getElementsByName(sName);
                if (objIeTags.length > 0) return objIeTags;

                //For IE
                var objIeTags = new Array();
                var objIEs = document.getElementsByTagName(sTag);
                for (var iIE = 0; iIE < objIEs.length; iIE++) 
                       if (objIEs[iIE].getAttribute("name") == sName) 
                               objIeTags[objIeTags.length] = objIEs[iIE];
                return objIeTags;
            }

            //展开或隐藏指定标签（div）
            function fOpenOrCloseLeftContent(iNow) {
                var bIsOpen = false;
                var NowLeftContent = document.getElementById("LeftContent_" + iNow);
                if (NowLeftContent) bIsOpen = NowLeftContent.style.display != "none";
                var aLeftContent = fGetElementsByName("div", "LeftContent");
                if (aLeftContent) {
                    var iC = 0;
                    for (iC = 0; iC < aLeftContent.length; iC++) {
                        aLeftContent[iC].style.display = "none";
                    }
                }
                NowLeftContent.style.display = bIsOpen ? "none": "block";
            }
        </script>
    </head>
    
    <body>
        <form name="frmLeft" method="post" action="left.aspx" id="frmLeft">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="182" valign="top">
                        <div id="container">
                            <h1 class="TypeName">
                                <a href="LdLoginInfo.aspx">
                                    欢迎界面
                                </a>
                            </h1>
                            <div class="TypeContent" id="LeftContent_1" name="LeftContent">
                                <div class="Menu_TopLine">
                                </div>
                                <ul class="ContentList">
                                    <li>
                                        <a href="LdLoginInfo.aspx" title="系统综合数据">
                                            综合数据
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <h1 class="TypeName">
                                <a>
                                    员工信息
                                </a>
                            </h1>
                            <div class="TypeContent" style="display:none;" id="LeftContent_2" name="LeftContent">
                                <div class="Menu_TopLine">
                                </div>
                                <ul class="ContentList">
                                    <li>
                                        <a href="StaffInfoAdd.aspx?edSelf=zfj">
                                            个人信息
                                        </a>
                                    </li>
                                    <li>
                                        <a href="CommentsInfo.aspx">
                                            个人评论
                                        </a>
                                    </li>
                                    <li>
                                        <a href="StaffInfoList.aspx?view=zfj">
                                            通讯录
                                        </a>
                                    </li>
                                    <li>
                                        <a href="StaffInfoAdd.aspx">
                                            新增员工
                                        </a>
                                    </li>
                                    <li>
                                        <a href="StaffInfoList.aspx">
                                            员工管理
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <h1 class="TypeName">
                                <a>
                                    精英战报
                                </a>
                            </h1>
                            <div class="TypeContent" style="display:none;" id="LeftContent_3" name="LeftContent">
                                <div class="Menu_TopLine">
                                </div>
                                <ul class="ContentList">
                                    <li>
                                        <a href="PerformanceOrder.aspx?type=D13085CE4C61EA9A">
                                            最新龙虎榜
                                        </a>
                                    </li>
                                    <li>
                                        <a href="PerformanceOrder.aspx?type=8505E354441BBE78">
                                            本年龙虎榜
                                        </a>
                                    </li>
                                    <li>
                                        <a href="PerformanceOrder.aspx?type=260E5CB549C39C20">
                                            本季龙虎榜
                                        </a>
                                    </li>
                                    <li>
                                        <a href="PerformanceOrder.aspx?type=9CD248D27CDC5C55">
                                            本月龙虎榜
                                        </a>
                                    </li>
                                    <li>
                                        <a href="PerformanceOrder.aspx?type=6C3192A195FBD2E7">
                                            本周龙虎榜
                                        </a>
                                    </li>
                                    <li>
                                        <a href="PerformanceOrder.aspx?type=34EC59E4C5D9A3E0">
                                            上月龙虎榜
                                        </a>
                                    </li>
                                    <li>
                                        <a href="PerformanceOrder.aspx?type=A175EFCFF4D3487C">
                                            往年龙虎榜
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!--此处省略若干项-->
                            <h1 class="TypeName">
                                <a>
                                    退出系统
                                </a>
                            </h1>
                            <div class="TypeContent" style="display:none;" id="LeftContent_16" name="LeftContent">
                                <div class="Menu_TopLine">
                                </div>
                                <ul class="ContentList">
                                    <li>
                                        <a href="LdLoginOut.aspx?zfj=www.0duinfo.cn" title="点击注销系统" target="_top">
                                            注销系统
                                        </a>
                                    </li>
                                    <li>
                                        <a href="LdLoginOut.aspx" title="点击安全退出系统" target="_top">
                                            安全退出
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>
标签
#ie #class #div #stylesheet #建站系统