change image on click() using jQuery not working

Question

Hi Friends trying to change the image after click on link but failed to do. The scenario is I build a menu each tab has different image in grey colour I want when user click on that tha grey image would turn into white and when user click on another tab then earlier white image go back to grey colour and new image will turn white you can check my code below or can see fiddle here

HTML

<ul data-role="list-divider" class="footerMenu">
        <li><a href="#">
        <img src="http://s16.postimg.org/6fnxrzxu9/friends_Icon.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/7j823yihd/friends_Iconwh.png" width="114" height="77" alt=" " class="active"/><br />
          Friends</a></li>
        <li><a href="#">
        <img src="http://s16.postimg.org/5we94zh1t/cards_Icon.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/mivte29zl/cards_Iconwh.png" width="114" height="77" alt=" " class="active" /><br />
          Cards</a></li>
        <li><a href="#">
        <img src="http://s16.postimg.org/vt7xhlkpd/egreeting_Icon.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/lacj667f5/egreeting_Iconwh.png" width="114" height="77" alt=" "  class="active"/><br />
          Egreeting</a></li>
        <li><a href="#">
        <img src="http://s16.postimg.org/hukewma6p/post.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/nk0ngxgcx/postwh.png" width="114" height="77" alt=" " class="active" /><br />
          Post</a></li>
        <li><a href="#">
        <img src="http://s16.postimg.org/4jwk33jm9/custom_Icon.png" width="114" height="77" alt=" " />
        <img src="http://s16.postimg.org/qkcwjq2a9/custom_Iconwh.png" width="114" height="77" alt=" "  class="active"/><br />
          Custom</a></li>
      </ul>

SCRIPT

$('.footerMenu li a').on('click', function () {


    $('.footerMenu li a').children('img.active').each(function(index, element) {
        $(this).css('display','none');
    });

    //$('.footerMenu li a img.active').hide();  
    //$(this).children('img').css('display','none');
    $(this).children('img.active').css('display','inline');

    if($(this).children('img:not(.active)').css('display')== 'none')
    {   $(this).children('img:not(.active)').css('display','inline');
        }
        else

    {   $(this).children('img:not(.active)').css('display','none');
            }


})

CSS

body{background:red;}
.footerMenu img.active{display:none;}

Please help me guys..Thanks in advance :)

Arun P Johny · Accepted Answer · 2014-02-14 11:42:38Z

1

Try

var $as = $('.footerMenu li a'), $imgs = $as.find('img');
$as.on('click', function () {
    var $this = $(this), $cimgs = $this.find('img');
    $as.find('img:first-child').removeClass('active');
    $as.find('img:gt(0)').addClass('active');
    $cimgs.eq(1).removeClass('active');
    $cimgs.eq(0).addClass('active');
})

Demo: Fiddle

answered Feb 14, 2014 at 11:42

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

change image on click() using jQuery not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related