我写的 jQuery代码

<!--   引入jQuery -->
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

        $(function() {
            var subshowtime = "";   //变量，“2秒后自动隐藏”的对象赋值给这个变量
            var urlparamsub = "";      //接收从上一链接的页面传递过来的参数1 子菜单(span)
            var urlparammain = ""     //接收从上一链接的页面传递过来的参数2 主菜单(图片)id
            var $imghoverobj = "";       //记录鼠标悬停的图片对象
            var $subspanhoverobj = "";   //记录鼠标悬停在某个子菜单（span）的对象
            var $subspanchkedobj = ""; //记录点击的子菜单的span对象
            // 页面跳转后接收传递的参数，并初始化一些参数：选中的子菜单和主菜单
            //根据url传来的参数，对主菜单和子菜单的处理
            // 功能：1，将点击的主菜单样式变成点击后的样式。2，点击的主菜单对应的子菜单(div)显示。
            //       3，显示的子菜单里的点击的子菜单（span）的显示
            function getUrlParameter() {
   
                var strHref = "";
                //接收当前URL的信息,注意 这里加 parent,获得 整个框架的url
                strHref = parent.document.location.toString();  
                var intPos = strHref.indexOf("?");     //取得"?"的位置 
                var urlparam = strHref.substr(intPos + 1); //获取到右边的参数部分"f=..&page=..."
                intPos = urlparam.indexOf("&");
                urlparamsub = urlparam.substr(2, intPos - 2); //子菜单(span)id :spanimgsolutions2
                urlparammain = urlparam.substr(intPos + 6); //主菜单的名字，其中前面的img被省略了
                if (urlparamsub == "") { //页面第一次打开的时候，参数设定
                    urlparamsub = "spanimghome";   
                    urlparammain = "home";        
                }
                urlparammain = "img" + urlparammain + "id"; //主菜单(图片)的id
                $subspanchkedobj = $("#" + urlparamsub); //记录点击的子菜单的span对象
                imgClickStyle($("#" + urlparammain));     // 1
                imgMatchSubShow($("#" + urlparammain)); //2 和 3
    
            }
            getUrlParameter(); //页面加载的时候直接运行
            
            //===================================================================================================================\\
            //|| 鼠标点击某个子菜单(span)的事件,传递的参数：1，f:点击的子菜单(span)的id . 2，主菜单的名字，其中前面的img被省略了||
            //===================================================================================================================\\
            $("#subMenu span").click(function() {
                SubSpanclickedStyle($(this)); //子菜单（即span）点击后的样式
                var f = "";      //子菜单的名字
                var varpage = "";   //主菜单的名字 
                var varhref = $(this).parent().attr("href");
                var varhrefspanid = $(this).attr("id"); //这里是span的id e.g : spanimgsolutions2
                f = $(this).text(); //暂时没用 span 里的 text
                varpage = $(this).parent().parent().attr("id").substr(3); //solutions
                window.open(varhref + "?f=" + varhrefspanid + "&page=" + varpage, "_parent");
            })
            //鼠标悬停在主某一菜单上（一个图片上）
            $("#imgDiv :not(.imgblank)").hover(function() {
                allHide(); //先将所有的子菜单隐藏
                if (subshowtime != "")
                    clearTimeout(subshowtime); //停止2秒后自动隐藏
                if ($imghoverobj != "") {   //上次鼠标悬停的菜单，恢复原来的图片
                    imgOriginalStyle($imghoverobj); //上次悬停的菜单恢复原来的src
                }
                imgHoverStyle($(this)); //悬停时候图片的新src属性
                if ($("#" + urlparammain).attr("id") == $(this).attr("id")) {
                    imgClickStyle($(this));     //保持点击后的样式
                }
                //this 对应的子菜单显示，及被选中的子菜单的样式的改变
                imgMatchSubShow($(this));
                $imghoverobj = $(this); //鼠标悬停的图片对象
            }, function() {   // 鼠标移开后（与上面的是联合事件）
                var varthisobj = $(this).attr("class"); //从主菜单的属性class 获得子菜单的id(认为设定主菜单class属性值==对应该子菜单的id)
                var thisobj = document.getElementById(varthisobj); //获得子菜单的对象（子菜单的div）
                var $hiddiv = $(thisobj); //DOM 对象 转化成 Jquery 对象, $hiddiv 为 点击的主菜单对应的子菜单（div）对象
                subshowtime = setTimeout(function() { subDivHidAnChkedShow($hiddiv) }, 2000);   //2秒后自动隐藏及点击的菜单显示
            });

            $("#imgDiv :not(.imgblank)").click(function() {   //点击主菜单事件
                //主菜单点击后的样式
                imgClickStyle($(this));
                //imgcontactid   --- spanimgcontact
                var varid = $(this).attr("id");
                var indexvar = varid.lastIndexOf("id");
                var temp = varid.slice(0, indexvar); //取出字符串的中间部分 “contact”
                var subid = "span" + temp;       //取得子菜单的id
                $("#" + subid).triggerHandler("click");
            })
            //-----------------------下面是对子菜单的处理--------------◆------------------\\
            $("#subMenu div").hover(function() {   //鼠标悬停在子菜单（div层）的事件
                if (subshowtime != "")
                    clearTimeout(subshowtime);
                $(this).show();
            }, function() {     //鼠标离开子菜单（div层）的事件
                var $hiddiv = $subspanhoverobj.parent().parent();
                subshowtime = setTimeout(function() { subDivHidAnChkedShow($hiddiv) }, 2000);   //2秒后自动隐藏及点击的菜单显示
            });
            $("#subMenu span").hover(function() {      //鼠标悬停在某个子菜单的事件
                if ($subspanchkedobj.attr('id') == $(this).attr('id')) { //如果this 是有点击过的子菜单
                    SubSpanclickedStyle($(this));
                }
                else {
                    subSpanHoverStyle($(this)); //鼠标悬停的span的样式
                    $subspanhoverobj = $(this);   //记录鼠标悬停的span的对象
                }
            }, function() {       //鼠标离开某个子菜单的事件
                if ($subspanchkedobj.attr('id') == $(this).attr('id')) { //如果this 是有点击过的子菜单
                    SubSpanclickedStyle($(this));
                } else {
                    subSpanOriginalStyle($(this)); //恢复span 最原始的样式
                }
            });
            //=====================================================================\\
            //|| 某一子菜单（div）2秒后自动隐藏,被点中的主菜单对应的子菜单显示   ||
            //======================================================================\\
            function subDivHidAnChkedShow($subdiv) {
                $subdiv.hide();         //子菜单隐藏
                if ($subspanchkedobj != "") //如果有子菜单（span）被选中，则该子菜单对应的父级的父级的菜单（div）显示
                    $subspanchkedobj.parent().parent().show();
            }
            //=========================================\\
            //|| 某一主菜单（即图片）最原始的样式 ||
            //=========================================\\
            function imgOriginalStyle($imgObj) {
                var Num1 = $imgObj.attr("src").indexOf("_"); // “_”的位置，（js 下标从0开始）
                var NewStrUrl1 = $imgObj.attr("src").substring(0, Num1 + 1);    //截取 “_”之前的字符串
                var NewSrc1 = NewStrUrl1 + "up.gif";   //原来的图片
                $imgObj.attr("src", NewSrc1);   // 菜单恢复原来的src
            }
            //==========================================\\
            //|| 某一主菜单（即图片）鼠标悬停时的样式 ||
            //==========================================\\
            function imgHoverStyle($imgObj) {
                var Num = $imgObj.attr("src").indexOf("_"); // “_”的位置，（js 下标从0开始）
                var NewStrUrl = $imgObj.attr("src").substring(0, Num + 1);    //截取 “_”之前的字符串
                var NewSrc = NewStrUrl + "over.gif"; //记下this的src
                $imgObj.attr("src", NewSrc);     //悬停时候图片的新src属性
                $imgObj.css("cursor", "pointer"); //鼠标变成手型    
            }
            //======================================\\
            //|| 某一主菜单（即图片）点击后的样式 ||
            //======================================\\
            function imgClickStyle($imgObj) {
                var ckNum = $imgObj.attr("src").indexOf("_"); // “_”的位置，（js 下标从0开始）
                var ckNewStrUrl = $imgObj.attr("src").substring(0, ckNum + 1);    //截取 “_”之前的字符串
                var ckNewSrc = ckNewStrUrl + "there.gif";     //点击后的图片src
                $imgObj.attr("src", ckNewSrc);    //点击图片的新src属性
                $imgObj.css("cursor", "auto"); //鼠标变成手型
            }
            //========================================\\
            //||点击主菜单，对应的子菜单（div）的显示||
            //========================================\\
            function imgMatchSubShow($imgobj) {
                var varthisobj = $imgobj.attr("class"); //从主菜单的属性class 获得子菜单的id(认为设定主菜单class属性值==对应该子菜单的id)
                var thisobj = document.getElementById(varthisobj); //获得子菜单的对象（子菜单的div）
                $thisobj = $(thisobj); //DOM 对象 转化成 Jquery 对象
                $thisobj.show();     //子菜单显示
                //如果“子子菜单（span）”对应的父级主菜单是显示的子菜单(div)
                if ($subspanchkedobj.parent().parent().attr("id") == $thisobj.attr("id"))
                    SubSpanclickedStyle($subspanchkedobj);    //点击的子菜单的span对象显示
            }
            //========================================\\
            //|| 某一子菜单（即span）点击后的样式   ||
            //========================================\\
            function SubSpanclickedStyle($subspanobj) {
   
                if ($subspanobj.text().length != 0) {   //筛选，因为页面上有2个主菜单对应的子菜单内容知识个空格
                    $subspanobj.css("background-color", "#112277");
                    $subspanobj.css("color", "#ffffff");
                }
            }
            //==========================================\\
            //|| 某一子菜单（即span）鼠标悬停的样式   ||
            //==========================================\\
            function subSpanHoverStyle($subspanobj) {
                if ($subspanobj.text().length != 0) {   //筛选，因为页面上有2个主菜单对应的子菜单内容知识个空格
                    $subspanobj.css("background-color", "#7788bb"); //背景颜色变换
                    $subspanobj.css("color", "#ffffff");    //字体颜色发生变化
                }
            }
            //==========================================\\
            //|| 某一子菜单（即span）最原始的样式   ||
            //==========================================\\
            function subSpanOriginalStyle($subSpanObj) {
                $subSpanObj.css("background-color", "#bbccee");
                $subSpanObj.css("color", "#666666");
            }
        }) // “$(function() { ” 的结果标签
        function allHide() {   //全部的子菜单隐藏，除了点击后的主菜单对应的子菜单
            $("#subMenu div").hide();
        }
    </script>