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 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    158
    Thanks
    71
    Thanked 1 Time in 1 Post

    Change link colour

    Hi guys, I have a load of links that do something when clicked, all controlled by
    Code:
    $('#menu > a').click(
            function(event){
                event.preventDefault();
                event.stopPropagation();
                var $this = $(this);
                move($this,800,1);
            }
        );
    The move function basically moves some circles, nothing too fancy. What I want to do though is change the colour of the clicked link, without having to give each one an id. I plan to do this inside the move function as in this function I can change it to one colour when link is clicked, and another colour when something else is clicked. How can I change the link colour without getElementById?

    cheers

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Why would you need getElementById at all if you’re using jQuery? Just add a class or ID to the link when clicked while removing it for any other link, and use that class or ID to style the link:

    PHP Code:
    $('#menu > a').click(
            function(
    event){
                
    event.preventDefault();
                
    event.stopPropagation();
                var 
    $this = $(this);
                
    move($this,800,1);
                
    $this.closest('#menu').find('.active').removeClass('active').end().addClass('active');
            }
    ); 

  • Users who have thanked VIPStephan for this post:

    nick2price (06-16-2013)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    158
    Thanks
    71
    Thanked 1 Time in 1 Post
    Hey, I have made some progress, got a little problem though. I have made the links change colour, but they dont remove their colour when another link is pressed. I have a simple menu
    Code:
    <div id="menu" class="menu">
            <a id="management" class="management" href="">Management</a>
            <a id="strategy" class="strategy" href="">Strategy</a>
            <a id="account-directors" class="account-directors active" href="">Account Directors</a>
    </div>
    And then for the JQuery, I do
    Code:
    $('#menu > a').click(
            function(event){
                event.preventDefault();
                event.stopPropagation();
                var $this = $(this);
                move($this,800,1);
                $this.closest('#menu > a').find('.active').removeClass('active').end().addClass('active');
                $('.active').css('color', '#000000');
    So every click, it should remove the current active class, add a new one, and then change its colour.

    Am I doing something wrong here?

    Thanks

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    First of all, remove $('.active').css('color', '#000000'); from your code. Following the principle of behavioral separation we don’t apply CSS with JavaScript. That’s why we’re adding a class in the first place, so we can style it with CSS in its own separate stylesheet. If you were doing this with JS then you wouldn’t have to add the class anyway.

    Now, if your HTML is actually that simple then this should do it:
    Code:
    $this.addClass('active').siblings().removeClass('active');
    And as said, you style the links in the stylesheet with:
    Code:
    .active {color: black;}

  • Users who have thanked VIPStephan for this post:

    nick2price (06-18-2013)


  •  

    Posting Permissions

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