CODEWITHSUNDEEP
jquery
Kamal
Kamal

Reputation: 2180

change image on click() using jQuery not working

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 :)

Upvotes: 0

Views: 76

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

Related Questions