Question

我有以下内容，当点击一个按钮然后更改按钮的状态时，使用click和jquery fade来显示div ....

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>

CSS

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

JQUERY

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

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

这一切都很好但我想要做的是为五个按钮中的每个按钮设置不同的按钮/按下按钮图像。有人可以帮忙吗？

Answer 1

您应该使用背景图片而不是图片。然后你可以添加一个.active类，并通过css为你的所有按钮定义背景图像，如：

.link[data-rel="content3"] .active {
   background-image: url(....);
}

修改

http://jsfiddle.net/ttj9J/23/

现在你可以像我上面所描述的那样添加类

Answer 2

DEMO

function handler1() {
    $(this).find("img").attr("src", "http://i.imgur.com/vi1KLp9.png");
    $(this).one("click", handler2);
}

function handler2() {
    $(this).find("img").attr("src", "http://i.imgur.com/u1SbuRE.png");
    $(this).one("click", handler1);
}
$(".link").one("click", handler1);

Another DEMO - ＆gt;通过类

的CSS方法

已移除仅使用img代码的a代码

<强> HTML

<a class="link active" href="#" data-rel="content1"></a>

<a class="link" href="#" data-rel="content2"></a>

<a class="link" href="#" data-rel="content3"></a>

<a class="link" href="#" data-rel="content4"></a>

<a class="link" href="#" data-rel="content5"></a>

<强> CSS

.link {
    content:url("http://i.imgur.com/vi1KLp9.png");

}
.active {
    content:url("http://i.imgur.com/u1SbuRE.png");
}

<强> JS

$(".link").click(function () {
    $(this).toggleClass('active');
});

OP发表评论后

DEMO

<强> JS

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

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

<强> CSS

.link {
    content:url("http://i.imgur.com/u1SbuRE.png");
}
.active {
    content:url("http://i.imgur.com/vi1KLp9.png");
}

更改个别按钮状态

2 个答案: