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

Jクエリ

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

これはすべてうまく機能しますが、私がやろうとしているのは、5 つのボタンのそれぞれに異なるボタン/押されたボタンの画像を用意することです。誰でも助けることができますか？

4

2 に答える 2

0

画像の代わりに背景画像を使用する必要があります。次に、クラスを追加し、.activecss を介してすべてのボタンの背景画像を次のように定義できます。

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

編集：

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

これで、上で説明したようにクラスを追加できます

于 2013-08-24T11:30:11.607 に答える
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);

別のデモ--> クラスによる 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 に答える