使用Javascript更改CSS类

Question

有没有比我现在实施更好的方法？我担心我这样做的方式有点过时,我想知道是否有更优雅的解决方案.

我想通过对其应用CSS类来更改页面上的"selected"元素,并删除当前选中的元素.我改变元素类的代码:

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>

再次,这似乎有点hacky.有没有更好的方法来完成我想要做的事情？

Answer 1

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

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

这将清除现有的"选定"类,并将其添加到刚刚单击的类中.