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();
   });

});

Answer 2

您可以设置一个类，例如.active取决于链接是否处于活动状态，并根据所设置的类来定义两个不同的背景。请参阅此JSfiddle以获取示例：http://jsfiddle.net/B398u

HTML

<ul id="controlls">  
  <li><a href="#" data-target="#dealer" id="one">Dealer</a></li>
  <li><a href="#" data-target="#social" id="two">Social Media</a></li>
  <li><a href="#" data-target="#need" id="three">Need</a></li>
</ul>

 <div id="slider">
    <div id="dealer">
        <p>Dealer paragraph</p>
    </div>
    <div id="social">
        <p>Social paragraph</p>
    </div>
    <div id="need">
        <p>Need paragraph</p>
    </div>
</div>

CSS

a#one {
    /* replace `red` with `url('imageoff.png');` */
    background: red;
}
a#one.active {
    /* replace `blue` with `url('imageon.png');` */
    background: blue;
}
a#two {
    background: red;
}
a#two.active {
    background: blue;
}
a#three {
    background: red;
}
a#three.active {
    background: blue;
}

的Javascript

$(document).ready(function() {
$("#controlls li a").click(function(e) {
    e.preventDefault();
    $this = $(this);

    var id = $this.data('target');

    $('#controlls li a').removeClass('active');
    $this.addClass('active');

    $('#slider div').hide().filter(id).show();
});
});

div处于活动状态时更改按钮背景图像

2 个答案: