HTML+JS实现菜单背景变换

我做了一个menu.html用来存放上面的菜单栏，default.html放主页内容，里面的菜单是用iframe将menu.html嵌入default.html，js怎么实现点击菜单之后这个菜单的背景颜色改变？我的js如下window.onload = function () {
    var alla = document.getElementsByTagName('a');
    for (var i = 0; i < alla.length; i++) {
        alla[i].onclick = function () {
            show(this);
        }
    }
}function show(object) {
    object.style.background='#000';
}我的菜单如下：<body>
<div class="tophead">
    <div class="logo">
        <img src="image/title.png"/>
    </div>
    <ul>
        <a href="default.html" target="_parent">
            <li>首页</li>
        </a>
        <a href="aboutus.html" target="_parent">
            <li>关于我们</li>
        </a>
        <a href="news.html" target="_parent">
            <li>新闻动态</li>
        </a>
        <a href="class.html" target="_parent">
            <li>基地课程</li>
        </a>
        <a href="share.html" target="_parent">
            <li>感悟分享</li>
        </a>
        <a href="loyer.html" target="_parent">
            <li>政策法规</li>
        </a>
        <a href="baoming.html" target="_parent">
            <li>在线报名</li>
        </a>
    </ul>
</div>
</body>怎么做？我做的js没有用啊？点击菜单之后跳转的页面根本就没有相应的添加背景颜色。

解决方案 »

  1.   

    self.top.document.querySelector(':root').style.backgroundColor='xx'
      

  2.   

    额   你是想点击之后菜单项的背景颜色发生改变还是什么？？  你的js内容改变的是a标签的背景颜色，但是你的a标签被li标签盖住啦！！！就算你再怎么改a标签的背景颜色，页面中也是不会显示出来的，所以你获取dom元素时应该获取li，， 另外 这种结构的写法不科学，最好是li标签里面嵌套其他标签，你将li标签写在a标签里面  不易于阅读。。
      

  3.   

    没这么做过，肯定行不通的，你的只是改变当前页面的，如果点击了当前的具体菜单click，页面就会跳转，这个时候，你的dom重新刷新，还是走到那个click事件后停了，要想这样做必须保证有一个东西，能记录你点击的菜单id，cookie,或者是让他们后台用session保存你前端点击菜单的id,