1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. The forum has been upgraded to a more recent and user-friendly software, called "XenForo".
    It will take some time to get everything set up and running smoothly, so please report any bug you may find to the forum staff.
    Thank you for your patience.

Javascript Webdesign Help

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

  1. Shawn

    Shawn Well-Known Member

    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:
     
  2. Zer0

    Zer0 New Member

    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";
     
  3. Shawn

    Shawn Well-Known Member

    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
     
  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 :)
     
    Shawn likes this.
  5. Shawn

    Shawn Well-Known Member

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

Share This Page