使用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>

再次，这似乎有点骇人听闻。 有没有更好的方法来完成我要做的事情？

Answer 1

使用JQuery的方法如下：

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

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

Answer 2

不太建议使用getElementByClassName，因为当前有一些浏览器不完全支持此功能（主要是IE）。 这可能是在所有浏览器上都更好的工作：

<html>
<head>

<script type="text/javascript">
var previousElement = null;
function changeClass (newElement) {
     if (previousElement != null) {
          previousElement.className = "";
     }

     newElement.className = "selected";
     previousElement = newElement;
}

// just add a call to this function on the load of the page
function onload() {
     lis = document.getElementById("nav").getElementsByTagName("a");
     for (var i=0; i<lis.length; i++) {
          if (lis[i].className == "selected")
            previousElement = lis[i];
     }
}
</script>
<style type="text/css">
.selected {
    background: #0ee;
}
</style>
</head>
<body onload="onload()">
<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>
</body>
</html>

Answer 3

您所拥有的没有多大错。

可以考虑使用getElementsByTagName而不是IE不支持的getElementsByClassName来获取所有<a>标签作为数组，然后遍历该数组，将每个className设置为“”。

实际上，像jQuery或Prototype这样的Javascript库确实为您提供了许多专门为此类工作设计的功能。 但是，除非您使用的Java语言比这多得多，否则它们完全是过分的了。

最后，如果您的<a>旨在在禁用Javascript的情况下用作备份导航，则您可能希望onclick处理程序返回false； 阻止链接被跟踪。 （在您的情况下，为“＃”。）

Answer 4

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Untitled Document</title>

<style type="text/css">
li{margin:1ex 1em}
ul.selectable a{color:blue;text-decoration:underline;font-size:2em}
ul.selectable a.selected{color:red;border:red dotted 1px}
</style>
<script type="text/javascript">
// It is easier to fake a lightweight forEach than 
//an  getElementsByClassName function


Array.prototype.forAll= function(fun){
    var L= this.length, tem;
    if(typeof fun== 'function'){
        while(L){
            fun(this[--L]);
        }
    }
}

// You could have just one handler, listening to the div or ul
// and running the function on the target it it is a hyperlink.

onload= function(){
    var pa= document.getElementById("nav"),
    collection= pa.getElementsByTagName('a');

    pa.onclick= function(e){
        e= window.event? event.srcElement: e.target;
        if(e.tagName== 'A'){
            [].forAll.call(collection,function(itm){
                itm.className= '';
            });
            e.className= "selected";
            return e.focus();
        }
        return true;
    }
}

</script>
</head>
<body>

<div id= "nav"> 
<ul class= "selectable"> 
<li> <a href= "#" class= "selected"> Main</a> </li> 
<li> <a href= "#"> Downloads</a> </li> 
<li> <a href= "#"> News</a> </li> 
<li> <a href= "#"> Forums</a> </li> 
<li> <a href= "#"> Proposals</a> </li> 
</ul> 
</div>

</body>
</html>

Answer 5

我建议您使用JavaScript库来执行此操作。 例如，使用jQuery，您可以执行以下操作：

$("#nav .selected").removeClass("selected");

这将从#nav中所有具有“选定”类的子元素中删除“选定”类。

使用JavaScript更改CSS类

问题描述

5 个解决方案

解决方案1
5 2010-06-05 00:29:30

解决方案2
3 已采纳 2010-06-05 00:16:35

解决方案3
0 2010-06-05 00:42:58

解决方案4
0 2010-06-05 03:16:33

解决方案5
-1 2010-06-05 00:26:53

使用JavaScript更改CSS类

问题描述

5 个解决方案

解决方案1 5 2010-06-05 00:29:30

解决方案2 3 已采纳 2010-06-05 00:16:35

解决方案3 0 2010-06-05 00:42:58

解决方案4 0 2010-06-05 03:16:33

解决方案5 -1 2010-06-05 00:26:53

解决方案1
5 2010-06-05 00:29:30

解决方案2
3 已采纳 2010-06-05 00:16:35

解决方案3
0 2010-06-05 00:42:58

解决方案4
0 2010-06-05 03:16:33

解决方案5
-1 2010-06-05 00:26:53