1

我有以下代码，可让我单击其中一个按钮图像并让 div 内的内容淡入。这一切都很好，但我想要实现的是根据单击的按钮更改按钮的状态……

http://jsfiddle.net/ttj9J/2/

HTML

<a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/vi1KLp9.png"></a>
<a class="link" href="#" data-rel="content2"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<a class="link" href="#" data-rel="content3"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<a class="link" href="#" data-rel="content4"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<a class="link" href="#" data-rel="content5"><img src="http://i.imgur.com/u1SbuRE.png"></a>

<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
    <div id="content4">This is the test content for part 4</div>
    <div id="content5">This is the test content for part 5</div>
</div>

jQuery

 $(".link").click(function(e) {
          e.preventDefault();
          $('.content-container div').fadeOut('slow');
          $('#' + $(this).data('rel')).fadeIn('slow');
      });

    $( document ).ready(function() {
        $(".link")[0].click(); 
    });

CSS

.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

任何人都可以帮忙吗？

4

1 回答 1

1

演示

$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');
      $(".link img").attr("src", "http://i.imgur.com/u1SbuRE.png");
      $(this).find("img").attr("src", "http://i.imgur.com/vi1KLp9.png");
});

我改变了你的点击功能，请看上面的代码。擦亮它:)

于 2013-08-20T17:02:45.243 回答