sayedsohail Posted June 1, 2007 Share Posted June 1, 2007 Hi everyone, I got four hyper links, onclick i am submitting to javascript function to highlight the item i clicked, and the other items/links to some light background, sort of giving focus to the current link. But unfortunately, its not working, here is my code <html> <title>tabs inside the page</title> <body> <script language='javascript'> function selectdiv(what) { if(what) { alert(what); document.getElementById(what).style.backgroundColor = 'blue'; } } </script> <div id='menu1' style='position:absolute;top:100px; left:150px;'><a href='#' onclick=\"selectdiv('menu1')\">Add Form</a></div> <div id='menu2' style='position:absolute;top:100px; left:250px;'><a href='editform2.html'>Edit Form</a></div> <div id='menu3' style='position:absolute;top:100px; left:350px;'><a href='deleform3.html'>Delete Form</a></div> <div id='menu4' style='position:absolute;top:100px; left:450px;'><a href='searchform4.html'>Search Form</a></div> </body> </html> Another thing i wish to add a for loop somthing like this any help is greatly appreciated. var titles = document.getelementbyid('menu'); titles[0].style.color='red'; for(var k=1;k<titles.length;k++) titles[k].style.color = '#ffffff'; Quote Link to comment Share on other sites More sharing options...
micah1701 Posted June 1, 2007 Share Posted June 1, 2007 you don't need to escape the quotes in the onClick command: onclick=\"selectdiv('menu1')\" should just be: onclick="selectdiv('menu1')" also, at the end of your function, you may want to add line "return false;" so that the browser doesn't continue to follow the link after doing the stuff in the function. Quote Link to comment Share on other sites More sharing options...
sayedsohail Posted June 1, 2007 Author Share Posted June 1, 2007 This is what i did, but still its not working <html> <title>tabs inside the page</title> <body> <script language='javascript'> function selectdiv(what) { if(what) { var titles = document.getElementById(what); for(var k=0;k<titles.length;k++) titles[k].style.background='navy'; } return false; } </script> <div id='menu' style='position:absolute;top:100px; left:150px;'><a href='#' onclick="selectdiv('menu');">Add Form</a></div> <div id='menu' style='position:absolute;top:100px; left:250px;'><a href='editform2.html'>Edit Form</a></div> <div id='menu' style='position:absolute;top:100px; left:350px;'><a href='deleform3.html'>Delete Form</a></div> <div id='menu' style='position:absolute;top:100px; left:450px;'><a href='searchform4.html'>Search Form</a></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
nogray Posted June 1, 2007 Share Posted June 1, 2007 getElementById() will only return one object (not an array), you can use document.getElementsByTagName('DIV') which will return all the divs in your page. Also, each element should have a unique ID (yours have menu for all) To fix your script, you can use something like this (num_of_divs) is how many divs you want to change <script language='javascript'> var num_of_divs = 4; function selectdiv(what) { if(what) { for(var k=0;k<num_of_divs;k++) document.getElementById('menu'+k).style.background='navy'; } return false; } </script> <div id='menu0' style='position:absolute;top:100px; left:150px;'><a href='#' onclick="selectdiv('menu');">Add Form</a></div> <div id='menu1' style='position:absolute;top:100px; left:250px;'><a href='editform2.html'>Edit Form</a></div> <div id='menu2' style='position:absolute;top:100px; left:350px;'><a href='deleform3.html'>Delete Form</a></div> <div id='menu3' style='position:absolute;top:100px; left:450px;'><a href='searchform4.html'>Search Form</a></div> Notice I changed the ids to menu0, menu1, .... Quote Link to comment Share on other sites More sharing options...
sayedsohail Posted June 1, 2007 Author Share Posted June 1, 2007 Thanks nogray, here is the modified version, might be of any help to someone like me, although its not a perfect solution, please use it with care. <html> <title>tabs inside the page</title> <head> <script language='javascript'> ivar = num_of_divs = 4; function selectdiv(what,cur) { if(what) { for(var k=0;k<num_of_divs;k++) document.getElementById(what+k).style.background='white'; } document.getElementById(what+cur).style.background='#d7dabd'; return false; } </script> </head> <body> <div id='menu0' style='position:absolute;top:100px; left:150px; width:99px;color:white;'><a href='#' onclick="selectdiv('menu','0');">Add Form</a></div> <div id='menu1' style='position:absolute;top:100px; left:250px;width:99px;color:white;'><a href='#' onclick="selectdiv('menu','1');">Edit Form</a></div> <div id='menu2' style='position:absolute;top:100px; left:350px;width:99px;color:white;'><a href='#' onclick="selectdiv('menu','2');">Delete Form</a></div> <div id='menu3' style='position:absolute;top:100px; left:450px;width:99px;color:white;'><a href='#' onclick="selectdiv('menu','3');">Search Form</a></div> <div id='contentarea' style='top:200px; left: 150px; width:450px'></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.