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