CSS+JS实现菜单中遇到的一系列问题(innerHTML空格、onload载入顺序)
吐槽:之前的项目先搁置了,被催着做另外个网站,跪下了
菜单是模仿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();}