Home/ Questions/Q 821871
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T02:42:48+00:00

Is there a better way than the implementation I have now? I’m concerned that

  • 0

Is there a better way than the implementation I have now? I’m concerned that the way I’ve done it is a little hackish and am wondering if there’s a more elegant solution.

I want to change the “selected” element on the page by applying a CSS class to it, and remove the one that is currently selected. The code I have for changing the element’s class:

function changeClass(element) {
    document.getElementById("nav").getElementsByClassName("selected")[0].className = "";
    element.className = "selected";
}

And the corresponding elements:

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

Again, this seems a little hacky. Is there a better way of accomplishing what I’m trying to do?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using the getElementByClassName isn’t too recommended, because currently there are browser that don’t fully support this functionnality (mainly IE). This is probably something that would work better on all browser :

    <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>
    • 0