Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Senior Member
    Join Date
    Mar 2011
    Posts
    104
    Member #
    27314
    Liked
    6 times
    hi,
    I have looked everywhere for this and cant find a working example
    i have the following links:
    Code:
    <div id="menu">
                <ul>
                    <li class="active"><a href="#" id="home">Home</a></li>
                    <li class="off" ><a href="#" >your url</a></li>
                    <li class="off" ><a href="#">blog</a></li>
                  <li class="off"><a href="#" id="fb">facebook</a></li>
                  <li class="off"><a href="#" id="tw">twitter</a></li>
                </ul>
            </div>
    basicly i want the class changed to "active" when i click the link
    and the active link changed to "off"

    can someone please provide me with some code?

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You won't find this because it's not a common application. But here's how I'd do it in jQuery (roughly...you'll have to edit this because I'm creating this function on the fly):
    Code:
    function setActive (currentLink) {
    $("#menu").find("li").removeClass("active").addClass("off"); /* this would reset all of the classes to "off" for any "li" elements in the #menu div. */
    $(this).parent().removeClass("off").addClass("active"); /* this turns the parent element's class to "active". */
    }
    ...
    Code:
                    <li class="active"><a href="#" id="home" onclick="setActive(this);">Home</a></li>
                    <li class="off" ><a href="#" id="your-url" onclick="setActive(this);">your url</a></li>
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member
    Join Date
    Mar 2011
    Posts
    104
    Member #
    27314
    Liked
    6 times
    well this has brought me one step further so thank you
    the first line of the jquery seems to do its job perfectly
    but the second part the addclass("active") has some problems,..

    google for the addclass function then ...

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It's case sensitive. So you'll need to make sure it says addClass. That is the correct function.

    What you may also need to do is break the chain up into two lines. jQuery supports chaining, but sometimes it doesn't quite work as intended, I've found.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member
    Join Date
    Mar 2011
    Posts
    104
    Member #
    27314
    Liked
    6 times
    i checked for case sensitivity all seems fine there.

    ive split the second line like this:
    Code:
    function setActive (currentLink) {
    $("#menu").find("li").removeClass("active").addClass("off"); /* this would reset all of the classes to "off" for any "li" elements in the #menu div. */
    $(this).parent().removeClass("off"); /* this turns the parent element's class to "active". */
    $(this).parent().addClass("active");
    }
    but still no luck

    i am really no good in javascript/jquery though
    how does it recognise which link you are clicking? .parent?

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Hmmm. Did it remove the off class at least?

    If not, you can give each of your list items IDs and do the jQuery by ID. Something like this:
    Code:
    function setActive (parentId) { $("#menu").find("li").removeClass("active").addClass("off"); /* this would reset all of the classes to "off" for any "li" elements in the #menu div. */ $(parentId).removeClass("off").addClass("active");; /* this turns the parent element's class to "active". */
    }
    ...
    Code:
    <li class="active" id="home-list"><a href="#" id="home" onclick="setActive('#home-list');">Home</a></li> <li class="off" id="your-url-list"><a href="#" id="your-url" onclick="setActive('#your-url-list');">your url</a></li>
    Play with it. Try different things. That's the joy of coding (and the pain in the ***)...eventually if you get frustrated and go through enough wrong stuff, the right stuff will work.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Senior Member
    Join Date
    Mar 2011
    Posts
    104
    Member #
    27314
    Liked
    6 times
    the "off" class is non existent , i just put that there (might sound stupid) to understand the code a bit better im new in css and if i see a class somewhere saying off then i know them list items are not active or suppose to be

    but now thinking about that maybe thats why the query aint working,

    ill have a play and i post here back at some point with result,.. atleast you got me the right functions, so i have something to play with

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Cool stuff.

    I was wondering about the "off", actually. If it's the default, you're right...you don't need it. You only need the "active" class.

    Not sure why you're setting it on the list item as opposed to the actual link, either. Although when you get it figured out (and you will get it figured out), I'd be interested to see what you come up with. Show us the link when it's done.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Senior Member
    Join Date
    Mar 2011
    Posts
    104
    Member #
    27314
    Liked
    6 times
    thank you
    well im again a step closer,.. got it working... but theres always a but,..called IE

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    If you have a but with IE, it probably has something to do with your class itself. Usually jQuery is pretty cross-browser compatible.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:13 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com