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

回答

相關問題