sgtelias Posted May 3, 2016 Share Posted May 3, 2016 I try to explain my problem. I've a nav bar like this: <div id="navbar"> <ul> <li><a>Link1</a></li> <li><a>Link2</a></li> <li><a>Link3</a></li> </ul> </div> I'm trying to find a mode to automatically highlight the button link, first the link1, after some seconds the link2, etc. I've tried some code, but nothing, also because i'm studying javascript yet. Can you help me? Link to comment Share on other sites More sharing options...
davej Posted May 3, 2016 Share Posted May 3, 2016 It sounds like you just want to do this only for the sake of appearance? Perhaps you should look at CSS3 animations. http://www.w3schools.com/css/css3_animations.asp 1 Link to comment Share on other sites More sharing options...
sgtelias Posted May 3, 2016 Author Share Posted May 3, 2016 I've studied the css animation, i've wrote some codes, now i pass to css section. However it is my boss that want this effect... Link to comment Share on other sites More sharing options...
davej Posted May 3, 2016 Share Posted May 3, 2016 It would be easy enough to accomplish with Javascript. Link to comment Share on other sites More sharing options...
sgtelias Posted May 3, 2016 Author Share Posted May 3, 2016 http://w3schools.invisionzone.com/index.php?showtopic=55262 Link to comment Share on other sites More sharing options...
sgtelias Posted May 3, 2016 Author Share Posted May 3, 2016 I've tried with JS, but i'm a little disoriented Link to comment Share on other sites More sharing options...
davej Posted May 4, 2016 Share Posted May 4, 2016 You could try something like this. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> .highlight{ color:#0ff; background-color:#ddd; } </style> <script> var highlight; window.onload = cycle; function cycle(){ var str; var list = document.getElementById('navbar').getElementsByTagName('A'); if(highlight != undefined){alert('list['+highlight+'].className='+list[highlight].className);} if (highlight === undefined){ highlight = -1; }else if (highlight === list.length-1){ if (list[highlight].className.indexOf('highlight') != -1){ str = list[highlight].className.replace('highlight',''); list[highlight].className = str; highlight = -1; }else{ highlight = -1; } }else{ if (list[highlight].className.indexOf('highlight') != -1 ){ str = list[highlight].className.replace('highlight',''); list[highlight].className = str; } } highlight++; if (list[highlight].className.indexOf('highlight') != -1 ){ // do nothing }else{ list[highlight].className += ' highlight'; } setTimeout(cycle,500); } </script> </head> <body> <div id="navbar"> <ul> <li><a>Link1</a></li> <li><a>Link2</a></li> <li><a>Link3</a></li> </ul> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now