0

これに数日を費やしましたが、ガイダンスが必要です。div内に画像を切り替えるトグルがあります。基本的に、div をクリックすると、その中の画像が別の画像に変わるはずです。

これは jsfiddle へのリンクです。トグル領域全体をクリックすると、上部に画像が表示されます。

http://jsfiddle.net/VLe8g/

また、ここにコードがあります

HTML

<div class="toggle-wrap">
  <div class="trigger">
    <div class="one-third"><img src="http://placehold.it/200x200" /></div>
    <div class="two-thirds column-last">This is where the heading goes <br />
      This is where the description goes<br />
      <a href="#">Toggle Open</a></div>
  </div>
  <div class="toggle-container">
    <div class="one-third">First column This is where the heading goes This is where the heading goes</div>
    <div class="one-third">Second column This is where the heading goes This is where the heading goes</div>
    <div class="one-third column-last">Third column This is where the heading goes This is     where the heading goes</div>
  </div>
</div>

CSS

.toggle-wrap {
        float: left;
    width: 100%;
    margin-bottom: 5px;
}

.trigger {}

.trigger a {
    display: block;
    padding: 10px;
    padding-left: 15px;
    text-decoration: none;
    font-weight: bold;
    color: #1D1D1B;
    -webkit-transition-duration: 0s; 
    -moz-transition-duration: 0s; 
    -o-transition-duration: 0s; 
    background: url(tobeadded) no-repeat right 15px #F3F3F3;
 }

.trigger.active a { 
    background: url(tobeadded) no-repeat right -20px #F3F3F3;
}

.toggle-container {
    overflow: hidden;
    float: left;
    padding: 15px 15px 0 15px;
}

.one-third, .two-thirds {
    display: inline;
    float: left;
    margin-right: 4%;
}

.one-third {
    width: 30.66%;  
} 

.two-thirds {
        width: 64%; 
}

ジャバスクリプト

$(".toggle-container").hide(); 
        $(".trigger").toggle(function(){
        $(this).addClass("active");
        }, function () {
        $(this).removeClass("active");
    });
    $(".trigger").click(function(){
        $(this).next(".toggle-container").slideToggle();
    });

皆さんが私を助けてくれることを願っています。

ありがとう。

4

4 に答える 4

0 
$(this).find("img").attr("src", "http://placehold.it/400x400");

画像を 200x200 から 400x400 に変更します。それらの両方にクラスを追加できます (つまり、class=small、class=big)。jQuery は、どちらが現在表示されているかを識別し、それらを切り替えるために使用できます。

于 2013-07-12T10:18:27.410 に答える
0

デモはこちら

これを試して：

$(".toggle-container").hide();
$(".trigger").toggle(function () {
    $(this).addClass("active");
    $(".trigger").find('img').prop('src', 'http://jsfiddle.net/favicon.png');
}, function () {
    $(this).removeClass("active");
    $(".trigger").find('img').prop('src', 'http://placehold.it/200x200');
});
$(".trigger").click(function () {
    $(this).next(".toggle-container").slideToggle();
});
于 2013-07-12T10:22:08.830 に答える
0

id属性をimgに追加し、トグル ハンドラーが実行されるたびにsrc属性を変更します。imgの定義は次のようになります。

<img id="myImage" src="http://placehold.it/200x200" />

トグル ハンドラは次のようになります。

$(".trigger").toggle(function(){
    $(this).addClass("active");
    $("#myImage").attr('src', 'http://placehold.it/some_other_image');
}, function () {
    $(this).removeClass("active");
    $("#myImage").attr('src', 'http://placehold.it/200x200');
});
于 2013-07-12T10:22:36.257 に答える