javascript - 使用 JavaScript 更改 的类

Question

我有以下代码:

<div id="nav">
  <ul>
    <li id="tabOne" class="first current"><a href="./CS1.html" target="SheetView">Page One</a></li>
    <li id="tabTwo"><a href="./CS2.html" target="SheetView">Page Two</a></li>
    <li id="tabThree"><a href="./CS3.html" target="SheetView">Page Three</li>
    <li id="tabFour"><a href="./CS4.html" target="SheetView">Page Four</a></li>
    <li id="tabFive"><a href="./CS5.html" target="SheetView">Page Five</a></li>
    <li id="tabSix"><a href="./CS6.html" target="SheetView">Page Six</a></li>
  </ul>

这会将所选页面加载到名为“SheetView”的 iframe 中。我需要做的是在单击当前未选中的选项时使用 JavaScript 更改类。我应该说我的 CSS 中已经设置了当前类。我只是无法触发它。

我想在 <UL> 中添加一个 onlick 事件在那里调用onclick="Javascript:changeCurrent();"但是有问题(实际上是四个):

1. 是<ul onclick="JavaScript:changeCurrent();>我需要在哪里举办事件？
2. 促成改变的 JavaScript 是什么？
3. 如何使第一个选项默认设置为当前选项？
4. 有没有办法避免当前选择的选项成为事件链接？

我找到了几个不同的例子，但我无法调整它们以适合我。任何帮助将不胜感激。

Answer 1

因为您指定了您想要一个非 jQuery 响应，所以这里有一个函数可以适本地切换:

function toggleNavSelected(el){
    var list = document.getElementById('nav').children[0];
    for(var i=0; i<list.children.length; i++){
        var cur = list.children[i];
        if(el==cur){
            cur.classList.add("current");
            cur.firstChild.onclick = (function(){
                toggleNavSelected(this.parentElement);
                return false;
            });
        } else {
            if(cur.classList.contains("current")){
                cur.classList.remove("current");
            }
            cur.firstChild.onclick = (function(){
                toggleNavSelected(this.parentElement);
            });
        }
    }
}

为每个 LI 添加一个 onclick 处理程序 (onclick="toggleNavSelected(this);") 或在菜单加载后执行以下操作:

var list = document.getElementById('nav').children[0];
for(var i=0; i<list.children.length; i++){
    var el = list.children[i];
    el.firstChild.onclick = (function(){
        toggleNavSelected(this.parentElement);
    });
}

演示:http://jsfiddle.net/bWY7P/2/

(注意:JSFiddle 脚本有一个小区别；它添加了一个 return false; 到 onclick 函数，这样您就可以在没有链接实际跟随 HREF 属性的情况下使用它。不要使用你的实时代码中的那一行)

---

说明:

该函数查看 #nav 元素中的每个 LI 元素。
如果该元素是传递给函数的元素，则它添加类 .current.
否则，它会删除类 .current(如果存在)。

第二部分将一个函数绑定(bind)到每个调用toggleNavSelected() 函数的a 元素的onclick 事件，并传递其父元素(li) 作为参数。