使用 JavaScript 更改

的类

我有以下代码：

<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 中设置了当前的类。我只是没有办法触发它。

我想添加一个 onclick 事件<UL>在那里打电话onclick="Javascript:changeCurrent();"但有一个问题（实际上是四个）：

1. Is <ul onclick="JavaScript:changeCurrent();>我需要在哪里举办活动？
2. 使更改发生的最终 JavaScript 是什么？
3. 如何使第一个选项默认设置为当前选项？
4. 有没有办法阻止当前选定的选项成为活动链接？

我找到了一些不同的例子，但我无法调整它们以适合我。非常感激任何的帮助。

由于您指定需要非 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);
    });
}

Demo: http://jsfiddle.net/bWY7P/2/ http://jsfiddle.net/bWY7P/2/

（注意：JSFiddle 脚本有一个小区别；它添加了一个return false;到 onclick 函数，这样您就可以使用它，而无需实际遵循 HREF 属性的链接。不要在实时代码中使用该行）

解释：

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

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