Question

javascript改变classname问题

点击前的代码如下：

<a href="#menu1" ></i>分类一 </a>
<ul id="#menu1" class="nav nav-list collapse" >
<li ><a href="#">aaaaaaaa</a></li>
<li ><a href="#">bbbbbbbb</a></li>
<li ><a href="#">cccccccc</a></li>
</ul>

<a href="#menu2" ></i>分类二 </a>
<ul id="#menu2" class="nav nav-list collapse">
<li ><a href="#"></i>111111</a></li>
<li ><a href="#"></i>111111</a></li>
<li ><a href="#"></i>111111</a></li>
</ul>

<a href="#menu3" ></i>分类二 </a>
<ul id="#menu3" class="nav nav-list collapse">
<li ><a href="#"></i>########</a></li>
<li ><a href="#"></i>$$$$$$$$</a></li>
<li ><a href="#"></i>!!!!!!!!</a></li>
</ul>

#####################################
我需要用JS实现一下要求：
点击 <li>中的任意一个<a>标签之后，把class="nav nav-list collapse" 改为class="nav nav-list in“
注意：<ul>的id不一样
请问代码应该怎么写？怎么调用？麻烦详细点。我是JS小白

Answer 1

javascript完整代码如下：

<script type="text/javascript">
window.onload = function () {
    var uls = document.getElementsByTagName("ul");//遍历ul
    for (var i = 0; i < uls.length; i++) {
        var a = uls[i].getElementsByTagName("a");//遍历ul中的A标记
        for (var j = 0; j < a.length; j++) {
            a[j].onclick = function () {//A标记点击事件
                //修改ul的class
                this.parentElement.parentElement.className = "nav nav-list in";
            }
        }
    }
}
</script>

追问

大哥 不行啊 点击后就折叠了

默认的是我点击分类二 后里面的就展开了

但是 点击 aaaaaaaa 后分类二 又折叠了，我想设置点击 aaaaaaaa 让他继续展开

追答

点击 aaaaaaaa ，展开什么，还有子ul么？

追问

<li ><a href="#"></a></li> 对应的地址就是单页了。主要是每个单个都是include了那一导航，单击后就相当于刷新页面了，然后JS就变成默认的了，要是刷新后还能展开就能达到我要的效果了

如下图 他们对应的都是单独的页面

追答

要想刷新后还能有展开效果，那就在href里面加个样式的参数，当前展开的样式。
比如:aa.html#class1
然后在刷新以后，用window.location.hash读取这个样式。

追问

我不会JS的 求具体代码 谢谢

追答

要想刷新后还能有展开效果，那就在href里面加个样式的参数，当前展开元素的ID。
比如:aa.html#menu1
然后在刷新以后，用window.location.hash读取这个ID，让这个元素展开。

追问

哥，你还是直接给我代码吧 真心不会用，让我复制粘贴上去吧

追答

<script type="text/javascript">
    window.onload = function () {
        var id = window.location.hash;
        document.getElementById(id).className = "nav nav-list in";
    }
</script>

追问

只把上面的6段代码放到HTML底部就可以了吗？
错误提示Uncaught TypeError: Cannot set property 'className' of null

追答

<script type="text/javascript">

    window.onload = function () {

        var id = window.location.hash;

        document.getElementById(id).setAttribute("class","nav nav-list in");

    }

</script>

追问

Uncaught TypeError: Cannot call method 'setAttribute' of null user:185
window.onload

可以正常弹出 alert(window.location.hash)
但是
var id = window.location.hash
undefined

追答

第一次加载是没有hash的，点击A标记以后才有，你判断一下。

追问

不好意思 代码太长了 我发图吧  貌似还不对

Answer 2

var ul=document.getElementByTagName("ul");
for(var i=0,len=ul.length;i<len;i++)
{
    ul[i].setAttribute("class","nav nav-list in");
}

追问

不行，因为每个a标签的地址都是一个单独的静态页面，这些静态页面公用了那个导航

点击链接候就刷新了，然后又折叠了，朋友有时间的话帮我远程看一下吧

Answer 3

这种管理页面普遍都是用iframe来做的，左侧和右侧是两个独立的窗口页面，这样的话，父页面（左侧模块）就只是负责处理菜单状态，那会简单得多