1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Javascript Webdesign Help

Discussion in 'Code Snippets and Tutorials' started by Shawn, Nov 19, 2009.

  1. Shawn

    Shawn Level IV

    Joined:
    Jul 15, 2009
    Messages:
    1,989
    Likes Received:
    76
    Location:
    Somewhere, lah.
    Code (Text):
    1.  
    2. <html>
    3.  
    4. <head>
    5.  
    6. <title>Website</title>
    7.  
    8. <style type="text/css">
    9.  
    10. * {
    11. padding: none;
    12. margin: none;
    13. }
    14.  
    15. body {
    16. cursor: default;
    17. }
    18.  
    19. ul.nav {
    20. color: #333;
    21. font: 9px Georgia ;
    22. padding: 0px;
    23. }
    24.  
    25. .nav li {
    26. display: inline;
    27. list-style-type: none;
    28. }
    29.  
    30. .nav li a {
    31. color: #333;
    32. text-decoration: none;
    33. }
    34.  
    35. .nav li a:hover {
    36. color: #555;
    37. font-weight: bold;
    38. }
    39.  
    40. .nav li a.active {
    41. color: #555;
    42. font-weight: bold;
    43. }
    44.  
    45. .nav li a.active:hover {
    46. color: #555;
    47. font-style: normal;
    48. font-weight: bold;
    49. }
    50.  
    51. </style>
    52.  
    53. </head>
    54.  
    55. <body>
    56.  
    57. <ul class="nav">
    58.   <li><a class="active" href="#">Home</a></li>
    59.   <li><a href="#">About</a></li>
    60.   <li><a href="#">Works</a></li>
    61.   <li><a href="#">Contact</a></li>
    62. </ul>
    63.  
    64. </body>
    65.  
    66.  
    67. </html>
    68.  
    There's the code. So I get a page with 4 links in li tags horizontally. What I want to do is when I click let's say "Works", make the link change it's class to "active" and change the link "Home" to have a not active class.

    So how do I achieve this? I don't mind if you either make the list change it's class or make the link stay in it's a:active state until another link is clicked.

    Thanks :kiss:
     
    #1 Shawn, Nov 19, 2009
  2. Zer0

    Zer0 Level IV

    Joined:
    Mar 2, 2008
    Messages:
    3,037
    Likes Received:
    180
    Location:
    Home sweet home
    First set the the id of each <li> to something. Then the Javascript to change the class is
    Code (Text):
    1. document.getElementById(idhere).className = "newclassname";
     
    #2 Zer0, Nov 25, 2009
  3. Shawn

    Shawn Level IV

    Joined:
    Jul 15, 2009
    Messages:
    1,989
    Likes Received:
    76
    Location:
    Somewhere, lah.
    thanks Zero. but that is to change class only. is there a way to get the links to return to normal state when I click another, I can't have all links in a "selected" state.
    Not very good at javascript.

    Anyone knows how to work this? Looping and such i think
     
    #3 Shawn, Nov 25, 2009
  4. ricky92

    ricky92 Administrator
    Staff Member

    Joined:
    Nov 10, 2006
    Messages:
    1,866
    Likes Received:
    67
    Replace your HTML
    Code (Text):
    1. <ul class="nav">
    2.   <li><a class="active" href="#">Home</a></li>
    3.   <li><a href="#">About</a></li>
    4.   <li><a href="#">Works</a></li>
    5.   <li><a href="#">Contact</a></li>
    6. </ul>
    with this:
    Code (Text):
    1. <ul class="nav" id="nav">
    2.   <li><a class="active" href="#" onclick="setNav(this);">Home</a></li>
    3.   <li><a href="#" onclick="setNav(this);">About</a></li>
    4.   <li><a href="#" onclick="setNav(this);">Works</a></li>
    5.   <li><a href="#" onclick="setNav(this);">Contact</a></li>
    6. </ul>
    and use this javascript function:
    Code (Text):
    1. function setNav(obj)
    2. {
    3.     navLinks = document.getElementById('nav').getElementsByTagName('a');
    4.     for (i = 0; i < navLinks.length; i++)
    5.     {
    6.         if (navLinks[i] == obj)
    7.         {
    8.             obj.className = 'active';
    9.         }
    10.         else
    11.         {
    12.             navLinks[i].className = '';
    13.         }
    14.     }
    15.     return true;
    16. }
    It should work :)
     
    #4 ricky92, Nov 25, 2009
    Shawn likes this.
  5. Shawn

    Shawn Level IV

    Joined:
    Jul 15, 2009
    Messages:
    1,989
    Likes Received:
    76
    Location:
    Somewhere, lah.
    Thanks ricky, it works perfect :kiss:
     
    #5 Shawn, Nov 27, 2009