How to add and remove background images in css on clicking a link on page


Tags: javascript,jquery,css,ajax,onclick

Problem :

Ive that small Fiddle

http://jsfiddle.net/5XXdJ/

    <img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" /><br />

    <a href="" title="Switch" class="menulink">DE</a>
<a href="" title="Switch" class="menulink2">EN</a>
<a href="" title="Switch" class="menulink3">FR</a>

$(function() {
 $('.menulink').click(function(e){
     e.preventDefault();
   $("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg");
 });

$('.menulink2').click(function(e){
     e.preventDefault();
   $("#bg").attr('src',"http://placehold.it/333/fe3/img/picture2.jpg");
 });

     $('.menulink3').click(function(e){
     e.preventDefault();
   $("#bg").attr('src',"http://placehold.it/333");
 });
});

It works fine but my problem is:

I need to add an background image to every linkclass for selected/active state and inactive/default state, if i click another link on page.

For example the link "de" has default a white bg-image and if i click the link the bg-image changes to a black image for selected state.

If i click now "en" it will change the "de" link back into inactive state with the white background image and set the "en" bg-image-link into selected state-imagelink and will remove it if another link will be clicked.

I hope someone has an idea :)



Solution :

    $('.menulink').click(function(e){
        e.preventDefault();
        $("#bg").toggleClass('cls2')
    });

    $('.menulink2').click(function(e){
        e.preventDefault();
        $("#bg").toggleClass('cls3')
    });

    $('.menulink3').click(function(e){
        e.preventDefault();
        $("#bg").toggleClass('cls4')
    });

http://jsfiddle.net/sameerast/5XXdJ/39/ I did changes on your fiddle, this fiddle could help you.


    CSS Howto..

    How to make JqueryUi Slider vertical-align middle?

    How to determine the exact 'font-family' CSS value of an uploaded TrueType font?

    How to restore color in css after mouse leave?

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    bar graph with CSS, how to get it filling in from bottom to top, not top to bottom?

    How to select a .list-cell, in javaFX CSS

    How to make div to match image height with CSS

    How to increase a counter variable after a callback of a setTimeout-function?

    How to remove css property from last child element?

    How to write CSS3 animations with JavaScript objects?

    How to leave input file button usefull for drag and drop from desktop, but avoiding local redirection

    How to do grid of div elements?

    web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?

    how to run html$css$js files locally on browser [closed]

    How to set the specific prefix for file-loader in webpack?

    css3 pure: how to hover an element outside?

    How to do Vertical+Horizontal centering in CSS

    when click on button then show message

    how to obtain proper alignment of tables on top of each other with horizontal scrollbar at bottom

    How to make SVG clip-path work correctly in Google Chrome?

    How to have a bold header text?

    How do I get a dropdown choice to show up on the left of an entry on this To-Do list?

    Writing CSS rules to different browsers, how? [duplicate]

    How to break up long words but leave out short ones?

    How to load jQuery before CSS code?

    When styling XML with CSS, how to refer to tag names that contain periods or colons?

    How to visually indicate current page in ASP.NET MVC?

    How to fix the Height for this area?

    How can I remove the border around all the cells in a table?

    How to remove the space between list items [duplicate]