Onclick change the class of some tags

**el07694** · 12-04-2009 02:45 PM

Hi there,

In the div with id="menu" i have some <a> tags
I want when I click in one <a> tag of this div all <a> tags of this div get className="inactive" but especially the tag i have clicked to get className="active"

So I made this!

Code:

<html>
   <head>
      <script type="text/javascript">
         function changemenu(obj) {
	   var m = obj.getElementsByTagName("A");
	   for (i=0; i<m.length; i++) {
              m[i].className="inactive"; 
              if () 
              m[i].className="active";
	  };};
     </script>
   <body>
   <div onclick="changmenu(this);">
       <a>Bla Bla Bla</a>       <a>Bla Bla Bla</a>       <a>Bla Bla Bla</a>
   </div>
</body>
</html>

Now the only thing i search is what will be the case of if statement in changemenu function.
Thanks in advance!

**el07694** · 12-04-2009 03:08 PM

Sorry not

Originally Posted by el07694

Code:

   <div onclick="changmenu(this);">

but

Code:

   <div id="menu" onclick="changmenu(this);">

**mitya** · 12-04-2009 03:42 PM

That's precisely your problem - the way you've done it, it's going to be very hard to know which link was clicked, i.e. which link to give the class 'active', not 'inactive'. Much easier with events (even easier with jQuery but I don't know if you're proficient in that).

Code:

window.onload = function() {
	var divObj = document.getElementById('menu');
	var links = divObj.getElementsByTagName('a');
	window.addEventListener ? divObj.addEventListener('click', changeClasses, false) : divObj.attachEvent('onclick', changeClasses);
	function changeClasses(e) {
		var trigger = e.target ? e.target : window.event.srcElement;
		var counter = 0;
		var link;
		while (link = links[counter]) {
			link.className = link != trigger ? 'inactive' : 'active';
			counter++;
		}
	}
}

If you need explanation on any of that, buzz me.

**el07694** · 12-04-2009 04:28 PM

Thank you man It works!

Code:

<html>
	<head>
		<script type="text/javascript">
			window.onload = function() {
					var divObj = document.getElementById('menu');
				var links = divObj.getElementsByTagName('a');
				window.addEventListener ? divObj.addEventListener('click', changeClasses, false) : divObj.attachEvent('onclick', changeClasses);
				function changeClasses(e) {
					var trigger = e.target ? e.target : window.event.srcElement;
					var counter = 0;
					var link;
					while (link = links[counter]) {
						link.className = link != trigger ? 'inactive' : 'active';
						counter++;
					}
				}
			}
		</script>
		<style type="text/css">
			.active {
				font-family: Georgia, "Times New Roman", Times, serif;
				font-weight: bold;
				color: #999900;
			}
			a {
				cursor:pointer;
			}
			.inactive {
				color: #660033;
				font-size: medium;
				font-family: Georgia, "Times New Roman", Times, serif;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<a class="active">1234</a>
			<a>5678</a>
			<a>91011</a>
		</div>
	</body>
</html>

**mitya** · 12-04-2009 04:34 PM

No problem.

**mitya** · 12-04-2009 04:37 PM

Actually, modify it to include these 2 new lines

function changeClasses(e) {
var trigger = e.target ? e.target : window.event.srcElement;
if (trigger.tagName.toLowerCase() == 'a') {
var counter = 0;
var link;
while (link = links[counter]) {
link.className = link != trigger ? 'inactive' : 'active';
counter++;
}
}
}

Thread: Onclick change the class of some tags

Thread Tools

Display

Onclick change the class of some tags

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions