javascript - 使用 Javascript 更改 CSS 类

Question

有没有比我现在的实现更好的方法？我担心我这样做的方式有点老套，想知道是否有更优雅的解决方案。

我想通过对其应用 CSS 类来更改页面上的“选定”元素，并删除当前选定的元素。我拥有的用于更改元素类的代码:

function changeClass(element) {
    document.getElementById("nav").getElementsByClassName("selected")[0].className = "";
    element.className = "selected";
}

以及对应的元素:

<div id="nav">
    <ul>
        <li><a href="#" onclick="changeClass(this)" class="selected">Main</a></li>
        <li><a href="#" onclick="changeClass(this)">Downloads</a></li>
        <li><a href="#" onclick="changeClass(this)">News</a></li>
        <li><a href="#" onclick="changeClass(this)">Forums</a></li>
        <li><a href="#" onclick="changeClass(this)">Proposals</a></li>
    </ul>
</div>

同样，这似乎有点老套。有没有更好的方法来完成我想做的事情？

Answer 1

以下是使用 JQuery 执行此操作的方法:

$(document).ready( function()
{
    $("a").click( function()
    {
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    } );
});

这会清除现有的“选定”类并将其添加到刚刚单击的类中。