CSS+JS实现菜单中遇到的一系列问题（innerHTML空格、onload载入顺序）

最新推荐文章于 2022-08-24 10:45:02 发布

weixin_30607659

最新推荐文章于 2022-08-24 10:45:02 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/jellybaobao/archive/2012/08/18/2645614.html

本文讲述了在老旧模板基础上更新网站的过程，解决了菜单样式刷新丢失及页面加载前后JS执行时机等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

吐槽：之前的项目先搁置了，被催着做另外个网站，跪下了

菜单是模仿http://www.uchicago.edu/index.shtml的这个自己写的

因为整个网站是在一套模板的基础上去改（模板老旧到页面都不用div也没有jquery），菜单是单独的一个jsp(head.jsp)，用<%@ include file="head.jsp"%>的方法引入到主页面(main.jsp)中，菜单中的菜单项都链接到统一的页面(secondary.jsp)中，而这个secondary.jsp中同样再次引入head.jsp

当点击菜单项时会修改它的class

var a=document.getElementById(1);
a.className = "current";

用以激活CSS中对应的a.current属性

.green #slatenav ul li a.current{
    color:#005550;
    background:transparent url(../image/head/greenslate_background2.gif) repeat-x top center;
}

来保证菜单每切换一个页面，对应的菜单项能保持白色底的显示，如图所示

出现的问题：

1.因为切换到secondary.jsp页面导致重新引入head.jsp，原先写在head.jsp的JS里的样式修改失效了。

解决：在secondary.jsp载入时重新修改样式，JS部分

function ShowMessage(){
    var title = document.getElementById("a10");
    var s1=title.innerHTML
    for(var k=1;k<=7;k++)
            {
                document.getElementById(k).className ="";
            }    
    if(s1=="中心概况"){var a=document.getElementById(2);a.className = "current";}
    if(s1=="新闻资讯"){var a=document.getElementById(3);a.className = "current";}
    if(s1=="团队介绍"){var a=document.getElementById(4);a.className = "current";}
    if(s1=="合作交流"){var a=document.getElementById(5);a.className = "current";}
    if(s1=="成果展示"){var a=document.getElementById(6);a.className = "current";}
    if(s1=="招贤纳士"){var a=document.getElementById(7);a.className = "current";}
}
window.onload=function(){ShowMessage();}

其中的title是secondary页面中有从数据库读出的当前页面的名称，是放在一个<a>标签中，用document去获得它，然后清空其他菜单项的样式，给当前也的菜单项赋予样式。

1.1在使用innerHTML时遇到的读出一堆空格的问题

var title = document.getElementById("a10");
var s1=title.innerHTML

<a>标签原始写法：

<a id="a10" class="blue13"  href="mainAction.do?action=toSecondaryPage">
${pn.name}
</a>

获得的s1会是“ 新闻资讯 ”有一堆的空格

<a>标签正确写法：

<a id="a10" class="blue13"  href="mainAction.do?action=toSecondaryPage">${pn.name}</a>

没错，写到一行里！它就没空格了！！我去……

innerHTML会连你代码里不显示的字符换行什么的全都读出来，所以要紧凑地写。

1.2window.onload是载入页面前执行，还是载入页面完执行的问题

为了知道当前在哪一个页面，所以我选择从页面中读取数据，这就导致必须是页面载入完了，才执行修改样式的JS。

写法1：载入前就执行ShowMessage()方法

window.onload=ShowMessage();

写法2：页面全部载入后才执行ShowMessage()方法

window.onload=function(){ShowMessage();}

转载于:https://www.cnblogs.com/jellybaobao/archive/2012/08/18/2645614.html