Jump to content

this.classname='selected' & remove class from others


dzhax

Recommended Posts

Got another question. I need a function that will onclick give the current <span> tag a classname of "selected" while at the same time checking other <span> tags and removing the "selected" class from it. Since only one item can be selected at a time. I am printing the list of <spans> like so:

<td id="pagesListed" style="width: 175px; background-color:rgba(205,205,205,25); color:dimgray;">	 Pages:	 <hr style="color:dimgray;"/>	 <?		  $pageResult = getDirectoryList('../../../lib/pages');		  asort($pageResult);		  foreach($pageResult as $key => $value){			   echo "<span id=\"".$value."\" onclick=\"page2Load('".$value."'); updateSelected(this);\">".$value."</span><br/> \r\n";			   $key_temp = $key;		  }		  $defaultPage = 'index.php';	 ?></td>

For those of you that are not fluent in php here is what will print when run.

<td style="width: 175px; background-color: rgb(205, 205, 205); color: dimgray;" id="pagesListed">	 Pages:	 <hr style="color: dimgray;"/>	 <span onclick="page2Load('404.php'); updateSelected(this);">404.php</span><br/>	 <span onclick="page2Load('biography.php'); updateSelected(this);">biography.php</span><br/>	 <span onclick="page2Load('computer-repair.php'); updateSelected(this);">computer-repair.php</span><br/>	 <span onclick="page2Load('construction.php'); updateSelected(this);">construction.php</span><br/>	 <span onclick="page2Load('contact-us.php'); updateSelected(this);">contact-us.php</span><br/>	 <span onclick="page2Load('custom-computers.php'); updateSelected(this);">custom-computers.php</span><br/>	 <span onclick="page2Load('demonstrations.php'); updateSelected(this);">demonstrations.php</span><br/>	 <span onclick="page2Load('home.php'); updateSelected(this);">home.php</span><br/>	 <span onclick="page2Load('ie6.php'); updateSelected(this);">ie6.php</span><br/>	 <span onclick="page2Load('ie7.php'); updateSelected(this);">ie7.php</span><br/>	 <span onclick="page2Load('index.php'); updateSelected(this);">index.php</span><br/>	 <span onclick="page2Load('upgrade-center.php'); updateSelected(this);">upgrade-center.php</span><br/></td>

From what i understand

function updateSelected(obj){	 obj.classname="selected";}

should suffice for setting the class but i have no idea how i would check for other spans currently displaying class=selected.and being that the class selected is such a generic name I would also need it to be limited check only under the parent element with id "pagesListed". Any help on this would be awesome.

Link to comment
Share on other sites

function updateSelected(obj){var parent_elem = document.getElementById("pagesListed");var child_span = parent_elem.getElementsByTagName("span");for(i=0;i<child_span.length;i++){child_span[i].className=""} obj.className="selected";}

Edit: just fixed minor typo 'classname to className in obj.classname="selected";

Link to comment
Share on other sites

sorry but that is not working. infact i dont even think its being called. Is this not a proper format?

<div onclick="page2Load('index.php'); updateSelected(this);" id="index.php">index.php</div>

I added alert('Is this working?'); to the beginning of the function and it never alerted.and yes I did change the <span>'s into <div> tags.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...