2

我有以下内容，它使用点击和 jquery 淡入淡出在单击按钮时显示 div，然后更改按钮的状态....

http://jsfiddle.net/ttj9J/5/

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

查询

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

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

4

2 回答 2

0

演示

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

另一个DEMO --> 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的评论之后

演示

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");
}
于 2013-08-24T11:32:37.443 回答
0

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

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

编辑：

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

现在你可以添加我上面描述的类

于 2013-08-24T11:30:11.607 回答