使用JavaScript更改<li>元素的类。

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>添加onclick事件并调用onclick="Javascript:changeCurrent();"但存在四个问题：

1. <ul onclick="JavaScript:changeCurrent();>是我需要添加事件的地方吗？
2. 使更改发生的结果JavaScript是什么？
3. 如何使第一个选项默认设置为当前选项？
4. 有没有办法保持当前选定的选项不是活动链接？

我找到了一些不同的示例，但我无法使它们适合我的情况。非常感谢您的帮助。

- Benjamin

---

只使用自己编写的代码，还是可以使用jQuery？ - joequincy

我不知道什么是jQuery，所以请使用自己的代码。 - Benjamin

不一定是认可，但以下是关于 [tag:jquery] 的总结。 - David Thomas

changeCurrent() 函数是做什么用的？ - feeela

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脚本有一点不同；它在onclick函数中添加了return false;，以便您可以在不实际跟随HREF属性的情况下进行操作。请勿在实际代码中使用该行）

---

解释：

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

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

- joequincy

---

参见：event.preventDefault() vs. return false - feeela

嗯，对于本杰明来说这两个都不是必需的。我只是在JSFiddle中添加了它们以适应特定的环境。完美并不是必要的，只要调整能够适应演示环境，并且有解释说明即可。 - joequincy

嘿，谢谢你。我想给你点赞，但是一弹出框告诉我这需要15个声望值，而我没有，所以只能表示感谢。如果我获得了15个声望值，我会给你点赞的。仍然希望有一种方法可以阻止当前标签页的活动链接状态，但现在至少它能用了。非常感谢。 - Benjamin

@Benjamin，编辑了答案。现在当它将.current添加到li时，它还会将return false;添加到其中的链接的onclick函数中。（并在删除.current时将其删除）随意查看差异，以查看您需要添加什么。 - joequincy

Answer 2

1）如果你想在点击一个项目时更改当前选定的类别，请将onclick放入li项目中。 2）在这里使用jQuery会非常简单，你只需要用

- ABC

---

实际上，feeela的添加和删除类方法更好，因为我的方法会清除所有类。只需将他放置$('#nav a')更改为$('#nav li')即可。 - ABC

嗯，我会将事件处理程序设置为链接，因为它是用户选择的元素。您仍然可以使用 $( this ).parent( 'li' ) 在 jQuery 中获取列表项。 - feeela

Answer 3

首先，您应该从单独的脚本中设置事件处理程序，而不是使用onclick属性。这样可以避免重复代码，并将所有内容放在一个地方。HTML 也会更加清晰。

使用 jQuery 就像这样简单：

var menuLinks = jQuery( '#nav a' );

menuLinks.on( 'click' function() {

    menuLinks.removeClass( 'active' );
    $( this ).addClass( 'active' );

} );

你也可以用普通的JS来实现，但使用一些库可以避免浏览器不兼容的问题。

- feeela