asked on

JQuery addClass - Help needed

I'm using jquery addclass function to add a css class to an element to change the background color while the div or anchor element is clicked and default to former background color when the next element div or anchor is clicked. But I noticed that when I click the first anchor, the background actually changed to black according to my addClass, but it turned back to the original color just about few seconds after the click. I want it to stay as black color according to my addClass until I click the next div. I'm using this for header tabs. Please how can I achieve this?

HTML

<div id="menu1">
<a id="logoutid" href="logout.php"><img src="images/out1.png" alt="logout" title="Logout"></a>
<div id="notify"></div>
<a id="friendid" href="follow_page.php?u=myname><img src="images/follow.png" alt="follow" title="Follow"></a>
<a id="settingsid" href="profile_page.php?u=myname><img src="images/settings.png" alt="rss" title="Profile Setting"></a>
<a id="homeid" href="user_audio.php?u=myname><img style="margin-top:3px;" src="images/home.png" alt="home" title="Home Feed" width="27" height="26"></a>
</div>

Open in new window

CSS

.icon-selection {
    background-color: black;
}

Open in new window

JQuery

$(document).ready(function() {
    $("#homeid").on('click', function() {
        $(this).addClass('icon-selection');
    });
});

Open in new window

Chris Stanyon

When you click on an Anchor tag, your jQuery will add the class and change colour, but then the link will be followed to it's href location (user_audio.php). When this new page loads, the class that you added doesn't persist because you're effectively on a different page and you haven't clicked on the link on that page.

You have a couple of options. You can either prevent the link from being followed when clicked, so you never leave the page, or you pass an argument into the new page that pre-sets the class on the relevant element.

If you want you link to act like a normal one, then the latter is what you'll need to do. If you take this route, then adding the class using jQuery is effectively redundant because you'll laod a new page anyway.

Adebayo Ojo

ASKER

Okay, below is what I did to get the expected result I wanted:

$(document).ready(function() {
    if (document.URL.indexOf("user_audio") != -1) {
        $("#homeid").attr('src', './images/home.png');
    } else if (document.URL.indexOf("follow") != -1) {
        $("#friendid").attr('src', './images/follow.png');
    } else if ((document.URL.indexOf("profile") != -1) || (document.URL.indexOf("callrecords") != -1)) {
        $("#settingsid").attr('src', './images/settings.png');
    } else if (document.URL.indexOf("notification") != -1) {
        $("#note_still").attr('src', './images/note_still.png');
    }
});

Open in new window

With this, I don't need any CSS and I changed the tab icons based on the URL visited.

And I moved the ID from the anchor tag to the img tag:

<a href="user_audio.php?u=myname><img id="homeid" style="margin-top:3px;" src="images/home-gray.png" alt="home" title="Home Feed" width="27" height="26"></a>

Open in new window

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.