用Javascript更改CSS类

有没有比我现在实现的更好的方法？我很担心我做这件事的方式有点骇人，我想知道是否有更优雅的解决方案。用Javascript更改CSS类

我想通过对其应用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>

再次，这似乎有点哈克。有没有更好的方式来完成我想要做的事情？

来源

2010-06-04 Corey

请注意'getElementsByClassName'本身不受IE的支持。 – CMS 2010-06-05 00:11:02

我同意那些建议您使用jQuery的答案。在这里了解更多有关jQuery的信息：http://docs.jquery.com/ – Phliplip 2010-06-05 11:21:58

不太推荐使用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>

来源

2010-06-05 00:16:35 HoLyVieR

-1

我建议您使用JavaScript库来执行此操作。例如，使用jQuery你可以做这样的事情：

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

这从有类“选择” #nav的所有子元素去掉“选择”类。

来源

2010-06-05 00:26:53 Behrang

真的值得拥有一个大型的库，因为我对jQuery没有其他用处吗？ – Corey 2010-06-05 18:56:10

如果你在做什么并不是一个简单的网站，我会建议你使用一个好的JS库，不管它是jQuery，Prototype还是其他的东西。但如果它是微不足道的，你不介意处理跨浏览器问题，那是另一个问题...... – Behrang 2010-06-06 03:44:06

下面介绍如何用jQuery做到这一点：

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

这将清除现有的“选择”级，并将其添加到刚刚点击的那个。

来源

2010-06-05 00:29:30 jdigital

你得到的东西没有太多的错误。

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

像jQuery或Prototype这样的Javascript库确实为您提供了许多专门为此类工作而设计的功能。但是，除非你做了比这更好的Javascript，否则它们完全是过度杀伤性的。最后，如果您的<a>是为了在Javascript被禁用的情况下进行备份导航，您可能希望您的onclick处理程序返回false;这可以防止链接被跟踪。（在你的情况下，以“＃”。）

来源

2010-06-05 00:42:58

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

来源

2010-06-05 03:16:33 kennebec

用Javascript更改CSS类

回答

相关问题