代码之家 › 专栏 › 技术社区 › Corey

用javascript更改CSS类

css javascript

Corey · 技术社区 · 16 年前

有没有比我现在拥有的实现更好的方法?我担心的是,我做这件事的方式有点老土,我想知道是否有一个更优雅的解决方案。

我想通过将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>

同样,这看起来有点老土。有没有更好的方法来完成我想做的事情?

5 回复 | 直到 16 年前

HoLyVieR 16 年前

不建议使用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>

Jason 16 年前

下面介绍如何使用jquery执行此操作:

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

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

Ed Daniel 16 年前

你所拥有的没有太大的错误。

代替IE不支持的getElementsByClassName,考虑使用getElementsByTagname获取 <a> 标记为一个数组,然后遍历该数组,为每个数组将classname设置为“”。

像jquery或prototype这样的javascript库确实为您提供了许多专门为这类工作设计的函数。但是,除非你做的Javascript比这个多了一点,否则它们完全是多余的。

最后,如果你 <A & GT; 如果禁用了javascript,则希望onclick处理程序返回false,这将阻止跟踪链接。(在您的情况下,改为“”)。

kennebec 16 年前

<!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>

-1

Behrang Saeedzadeh 16 年前

我建议您使用一个JavaScript库来完成这项工作。例如,使用jquery,可以执行如下操作:

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

这将从“已选择”类的导航的所有子元素中删除“已选择”类。