Onclick link change text color

JavaScript
1

Dear All,
I have a page here http://183.78.169.54/tree/2.html. What I want to control is that for link on the left that is clicked I want the text to change to a particular color to highlighted it have been selected. And when another linked is clicked I want the previous linked to be reset to the normal color. How to achieve that.

2

I would recommend setting a class name for the link you clicked.


// Get all the links
var links = document.getElementById('sitemap').getElementsByTagName('a');

// Set a highlighted link
function highlightCurrent(link) {
    link.className = 'current';
}

// Remove all highlighted links (remove class names)
function removeHighlights() {
    for (var i = 0, l = links.length; i < l; i += 1)  {
        links[i].className = '';
    }
}

// Add click events
for (var i = 0, l = links.length; i < l; i += 1) {
    links[i].onclick = function(){
        removeHighlights();
        highlightCurrent(this);
    }
}

You could simplify this even further if you were to use a bit of jQuery (this handles the click binding and also any existing classes you are using for styling, whereas the native js above does not):


var $links = $('#sitemap a');
$links.click(function(){
    $links.removeClass('current');
    $(this).addClass('current');
});
3

Dear Anthony,
I am not that familiar with jquery yet always get stuck. Anyway I dont get you when you said (this handles the click binding and also any existing classes you are using for styling, whereas the native js above does not)?

4

Clicking is an event that the browser will tell javascript has happened when the user clicks the mouse. You can “bind” javascript to run when the user clicks on certain elements in your page, jQuery just handles this in a very neat cross browser way.

HTML and CSS support having multiple class names on elements. You don’t have that occuring in your code currently, but if it did then jQuery helps by providing functions to add and remove individual classes. The first example code I had does not do that.

5

Dear Anthony,
Below is my full codes with the codes you suggested well is running well now. So do you want me to change it to jQuery is it because I still cant see the advantage that I will get from jQuery. In addition to that can I also have a different background color on the selected link?

this.sitemapstyler = function(){
var sitemap = document.getElementById(“sitemap”)
if(sitemap){

	this.listItem = function(li){
		if(li.getElementsByTagName("ul").length &gt; 0){
			var ul = li.getElementsByTagName("ul")[0];
			//alert("NAme is :"+ul.id);
			
			ul.style.display = "none";
			var span = document.createElement("span");
			span.className = "collapsed";
			span.onclick = function(){
				//alert("Clicked");
				var form1= document.getElementById('form1');
      var uls = form1.getElementsByTagName("ul");
      var spans = form1.getElementsByTagName("span");
      for (var i = 1; i &lt; uls.length; i++)
      {
				 if(uls[i].id==ul.id)
				 {
				 	//alert("UL ID : "+uls[i].id+"  "+ul.id+"SAME");
				 }
				 else
				 {
				 uls[i].style.display = "none";
				 }
				 //
				 //uls[i].className = "expanded";
			  }
			  for (var j = 0; j &lt; spans.length; j++)
      {
				 spans[j].className = "collapsed";
			  }
				//alert("ul.style.display :"+ul.style.display );
				ul.style.display = (ul.style.display == "none") ? "block" : "none";
				this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
			};
			li.appendChild(span);
		};
	};
	
	var items = sitemap.getElementsByTagName("li");
	for(var i=0;i&lt;items.length;i++){
		//alert("I :"+i+"LEngth :"+items.length);
		listItem(items[i]);
	};
	
	
	var links = document.getElementById('sitemap').getElementsByTagName('a');

	// Set a highlighted link
	function highlightCurrent(link) {
	    link.className = 'current';
	}
	
	// Remove all highlighted links (remove class names)
	function removeHighlights() {
	    for (var i = 0, l = links.length; i &lt; l; i += 1)  {
	        links[i].className = '';
	    }
}

	// Add click events
	for (var i = 0, l = links.length; i &lt; l; i += 1) {
	    links[i].onclick = function(){
	    	alert("ATR");
	        removeHighlights();
	        highlightCurrent(this);
	    }
	}
	
	
};

};

window.onload = sitemapstyler;