www.webdeveloper.com
Results 1 to 6 of 6

Thread: Onclick change the class of some tags

  1. #1
    Join Date
    Oct 2009
    Posts
    32

    Onclick change the class of some tags

    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!

  2. #2
    Join Date
    Oct 2009
    Posts
    32
    Sorry not
    Quote Originally Posted by el07694 View Post
    Code:
       <div onclick="changmenu(this);">
    but
    Code:
       <div id="menu" onclick="changmenu(this);">

  3. #3
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    947
    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.

  4. #4
    Join Date
    Oct 2009
    Posts
    32
    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>

  5. #5
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    947
    No problem.

  6. #6
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    947
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles