使用JavaScript更改< li>的类 [英] Use JavaScript to change the class of an <li>

问题描述

我有以下代码：

<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中设置了当前的类。我无法触发它。

This loads the selected page into an iframe named "SheetView." What I need to do is use JavaScript to alter the class when an option that isn't the currently selected on is clicked. I should say that I have the current class already setup in my CSS. I just have no way to trigger it.

我想在< UL> 上添加一个onlick事件那里并且调用 onclick =Javascript：changeCurrent（）;但是有问题（实际上有四个）：

I thought adding an onlick event to the <UL> up there and calling onclick="Javascript:changeCurrent();" but there is the problem (four actually):

1. 是< ul onclick =JavaScript：changeCurrent（）;> 我需要举办活动吗？


2. 使更改发生的结果是什么？


3. 如何在默认情况下将第一个选项设置为当前？


4. 有没有办法让当前选中的选项成为活动链接？

1. Is <ul onclick="JavaScript:changeCurrent();> where I need to have the event?
2. What is the resulting JavaScript to make the change happen?
3. How can I cause the first option to be set as current by default?
4. Is there a way to keep the currently selected option from being an active link?

我发现了一些不同的例子，但我无法定制它们为我工作。任何帮助都会非常感激。

I found a few different examples but I couldn't tailor them to work for me. Any help would be most appreciated.

推荐答案

因为你指定你想要一个非-jQuery响应，这是一个适当切换的函数：

Since you specified that you wanted a non-jQuery response, here's a function that will toggle appropriately:

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);
            });
        }
    }
}

添加一个onclick处理程序每个LI（ onclick =toggleNavSelected（this）;）或在菜单加载后执行以下命令：

Either add an onclick handler to each LI (onclick="toggleNavSelected(this);") or execute the following after the menu has loaded:

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属性的链接的情况下使用它。不要在你的实时代码中使用那一行）

(note: The JSFiddle script has a small difference; it adds a return false; to the onclick function so that you can play with it without the links actually following the HREF attribute. Do not use that line in your live code)

该函数查看每个 LI #nav 元素中的元素。

如果该元素是传递给函数的元素，然后它添加类 .current 。

否则，它将删除类 .current （如果存在）。

The function looks at each LI element within the #nav element.
If that element is the element passed to the function, then it adds the class .current.
Otherwise, it removes the class .current (if present).

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

The second part binds a function to the onclick event of each a element that calls the toggleNavSelected() function and passes its parent element (the li) as the argument.

这篇关于使用JavaScript更改< li>的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！