Results 1 to 6 of 6

Thread: Need help with changing anchor class

  1. #1
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need help with changing anchor class

    Hello, I'm very bad with javascript and would appreciate any assistance...!

    I'm using one of the ajax scripts to load some content:

    Code:
    <li id="cast-clooney" class="graphic-text"><a class="inactive" href="javascript:ajaxpage('bios/external.html','subpage-content');" onclick="ajaxpage('bios/external.html','subpage-content');">Jim Bo Bob</a></li>
    Everything works great but I also need to have the anchor class change from "inactive" to "active" once a user clicks on it.

    Any help or suggestions would greatly be appreciated.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    That's not necessary. You can style active anchors with the a:active pseudo-class.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey
    That's not necessary. You can style active anchors with the a:active pseudo-class.
    Right, but a:active will only remain active provided that the user doesn't click anywhere else on the page. I need the link to act as a sort of breadcrumb to indicate where the user is at...

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You want a:visited then.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    You want a:visited then.
    But the only problem with that is, if a user selects another link of the same menu, the result will be two menu links in a "selected" state.

    Is this something that'd be difficult...?

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by achtungbaby
    Code:
    <li id="cast-clooney" class="graphic-text"><a class="inactive" href="javascript:ajaxpage('bios/external.html','subpage-content');" onclick="ajaxpage('bios/external.html','subpage-content');">Jim Bo Bob</a></li>
    Using the javascript pseudo-scheme in links is rarely a good idea (unless preventing all user agents that don't implement JavaScript [or similar] from navigating the site is the intent).

    Everything works great but I also need to have the anchor class change from "inactive" to "active" once a user clicks on it.
    Code:
    function changeState(link) {
      this.className = ('active' == this.className)
                     ? 'inactive'
                     : 'active';
    }
    
    <a ... onclick="...; changeState(this);">...</a>
    Right, but a:active will only remain active provided that the user doesn't click anywhere else on the page.
    The :active pseudo-class only remains in effect whilst the user is 'activating' a particular element. For instance, a link is active from when the user clicks a link, to when the mouse button is released.

    But the only problem with that is, if a user selects another link of the same menu, the result will be two menu links in a "selected" state.
    You should have stated this aim in the first place:

    Code:
    var changeState = (function() {
      var active = null;
    
      return function(link) {
        if(active == link) {
          link.className = 'inactive';
          active = null;
        } else if(active) {
          active.className = 'inactive';
          (active = link).className = 'active';
        } else {
          var state = 'inactive';
    
          if('inactive' == link.className) {
            state = 'active';
            active = link;
          }
          link.className = state;
        }
      };
    })();
    Untested.

    There is another thread similar to this one in the CSS forum.

    Mike
    Last edited by mwinter; 11-14-2005 at 10:57 PM. Reason: Added link to other thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •