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

这将清除现有的“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

你所拥有的东西并没有太大的错误。

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

像jQuery或Prototype这样的Javascript库确实为您提供了许多专门为此类工作设计的功能。但是，除非你的Javascript比这更多，否则它们就会完全矫枉过正。

最后，如果您的<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的所有具有“已选择”类的子元素中删除“selected”类。

使用Javascript更改CSS类

5 个答案: