javascript - 当 div 处于事件状态时更改按钮背景图像

Question

我有这段代码可以在单击相关链接时淡出并更改 div。我想要图片作为我的链接，而不仅仅是“经销商、广告等”。除此之外，当相应的 div 处于事件状态时，我希望图像更改为另一个图像。

举个例子。单击“dealeroff.jpg”图像时，它将更改为“dealeron.jpg”，直到单击另一个图像并更改事件 div。

<ul id="controlls">  
  <li><a href="#" id="one" class="dealer">Dealer</a></li>
  <li><a href="#" id="two" class="advertise">Advertise</a></li>
  <li><a href="#" id="three" class="social">Social Media</a></li>
  <li><a href="#" id="four" class="need">Need</a></li>
</ul>

 <div id="slider">
    <div id="dealer">
        <p>If you click on this paragraph
          you'll see it just fade away.
        </p>
    </div>
    <div id="advertise">
        <p>If you click on this paragraph
        you'll see it just fade away.
        </p>
    </div>
    <div id="social">
        <p>If you click on this paragraph
        you'll see it just fade away.
        </p>
    </div>
    <div id="need">
        <p>If you click on this paragraph
        you'll see it just fade away.
        </p>
    </div>
</div>

$("#controlls li a").click(function(e) {
   e.preventDefault();
     var id = $(this).attr('class'); // get class of clicked anchor tag
      // first fadeOut the visible div
$('#slider div:visible').fadeOut(500, function() {
    // after fadeOut complete show target div
    $('div#' + id).fadeIn();
  })
});

任何帮助都会很棒 :)

Answer 1

像这样:

<ul id="controlls">  
    <li><img src="dealeroff.jpg"    id="one"   class="dealer" /></li>
    <li><img src="advertiseoff.jpg" id="two"   class="advertise" /></li>
    <li><img src="socialoff.jpg"    id="three" class="social" /></li>
    <li><img src="needoff.jpg"      id="four"  class="need" /></li>
</ul>

用 JS

$("#controlls li img").on('click', function(e) {
   e.preventDefault();
   var div = $('#' + this.className);

   $("#controlls li img").not(this).attr('src', function(_,source) {
       return source.replace('on', 'off');
   });

   $(this).attr('src', function(_,source) {
       if ( source.indexOf('off') != -1 ) {
           return source.replace('off', 'on');
       } else {
           return source.replace('on', 'off');
       }
   });

   $('#slider div:visible').fadeOut(500, function() {
       div.fadeIn();
   });

});