Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    846
    Thanks
    15
    Thanked 10 Times in 10 Posts

    jquery class change on load

    I have a navigation list set up as
    Code:
    <ul id="Alpha">
    <li id="?"><a href="#alpha" rel="#">#</a></li>
    <li id="A"><a href="#alpha" rel="A">A</a></li>
    <li id="B"><a href="#alpha" rel="B">B</a></li>
    <li id="C"><a href="#alpha" rel="C">C</a></li>
    // And so on...
    Now... I want to automatically set the class of say B on load to 'currentpage'. I get the current page from the query string via php
    PHP Code:
        <?php if(!empty($_GET["cat"])) {
            echo 
    'highlight = "'.strtoupper($_GET["cat"]).'";';
        }
        else {
            echo 
    'highlight = "A";';
        }
        
    ?>
    which in turns either put the highlight variable to the value of $_GET['cat'] or by default A if nothing else is specified.

    How do I set the class of the link?
    I thought something like
    Code:
    	$("#Alpha a").attr('rel',highlight).attr('class','currentpage');
    but it just highlights everything. Seems like something simple but I can't figure it out and am running out of time. :-)
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    If you set an ID on each anchor element that matches the $_GET['cat'] value, you can just use an ID selector to make the change.

    PHP Code:
    <li id="A"><a href="#alpha" id="link_A" rel="A">A</a></li>

    .
    .
    .

    $(
    "#link_" highlight)..attr('class','currentpage'); 
    I'm not sure why you're messing with "rel".

  • Users who have thanked Fumigator for this post:

    dniwebdesign (12-04-2010)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Or even more simply, since you already have the id on the <li>:

    Code:
    $("#" + highlight).addClass('currentpage');

  • #4
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    846
    Thanks
    15
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by SB65 View Post
    Or even more simply, since you already have the id on the <li>:

    Code:
    $("#" + highlight).addClass('currentpage');
    This did not work.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Really? Works for me - adds the class to the li rather than the anchor, perhaps I should have emphasised that. The following would add the class to the anchor:

    Code:
     $("#" + highlight+' a').addClass('currentpage');


  •  

    Posting Permissions

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