2

その小さなフィドルをアイブ

http://jsfiddle.net/5XXdJ/

    <img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" /><br />

    <a href="" title="Switch" class="menulink">DE</a>
<a href="" title="Switch" class="menulink2">EN</a>
<a href="" title="Switch" class="menulink3">FR</a>

$(function() {
 $('.menulink').click(function(e){
     e.preventDefault();
   $("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg");
 });

$('.menulink2').click(function(e){
     e.preventDefault();
   $("#bg").attr('src',"http://placehold.it/333/fe3/img/picture2.jpg");
 });

     $('.menulink3').click(function(e){
     e.preventDefault();
   $("#bg").attr('src',"http://placehold.it/333");
 });
});

正常に動作しますが、私の問題は次のとおりです。

ページ上の別のリンクをクリックした場合、選択/アクティブ状態と非アクティブ/デフォルト状態のすべてのリンククラスに背景画像を追加する必要があります。

たとえば、リンク「de」にはデフォルトで白いbg-imageがあり、リンクをクリックすると、選択した状態のbg-imageが黒い画像に変わります。

今すぐ「en」をクリックすると、「de」リンクが白い背景画像で非アクティブ状態に戻り、「en」bg-image-linkが選択された状態-imagelinkに設定され、別のリンクがクリックされると削除されます。

私は誰かがアイデアを持っていることを願っています:)

4

5 に答える 5

0 
 <img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" /><br />
 <div id="links">
  <a href="" title="Switch" class="menulink">DE</a>
  <a href="" title="Switch" class="menulink2">EN</a>
  <a href="" title="Switch" class="menulink3">FR</a>
 </div>

<style>
   .active{
     background-image: url("http://placehold.it/333");
   }
</style>


    $(function() {    
     $('#links a').click(function(e){
     e.preventDefault();
     var className = $(this).attr('class');
     if (className == 'menulink') {
        $("#bg").attr('src',"http://placehold.it/333/3ef/img/picture1.jpg");
    } else if (className == 'menulink2')  {
         $("#bg").attr('src',"http://placehold.it/333/fe3/img/picture2.jpg");
    } else {
         $("#bg").attr('src',"http://placehold.it/333");
    }
    $('#links a').each(function() {
        $(this).removeClass('active');
    });

     $(this).addClass('active');

 });
});

http://jsfiddle.net/5XXdJ/38/

于 2012-10-20T12:12:46.307 に答える
0

あなたはこれを試すことができます、私はあなたがこの種のjqueryを探していると思います

$（this）.css（ "background-image"、 "url（/active.jpg）"）;

于 2012-10-20T12:21:17.167 に答える
0

HTML：

<div id="container" class="menulink" style="height:300px;width:300px"></div></br>
<div id="links">
  <a href="" title="Switch" id="menulink" class="menulink">DE</a>
  <a href="" title="Switch" id="menulink2">EN</a>
  <a href="" title="Switch" id="menulink3">FR</a>
</div>

CSS：

.menulink {
    background-image: url("http://placehold.it/333/3ef/img/picture1.jpg");
}
.menulink2 {
    background-image: url("http://placehold.it/333/fe3/img/picture2.jpg");
}
.menulink3 {
    background-image: url("http://placehold.it/333");
}

JAVASCRIPT：

$(function() {    
    $('#links a').click(function(e){
      e.preventDefault();
      var id= $(this).attr('id');
      $('#container').attr('class', '');
      $('#links a').each(function() {
        $(this).attr('class', '');
      });
     $('#' +id).addClass(id);
     $('#container').addClass(id);       
 });
});

http://jsfiddle.net/5XXdJ/49/

于 2012-10-20T21:12:56.697 に答える
0

おそらくCSSクラスとは異なる画像への参照を追加し、JavaScriptで必要に応じてそれらを追加/削除します。例えば：

http://jsfiddle.net/HTL2p/

HTML：

<img src="http://placehold.it/333/fe3/img/picture2.jpg" id="bg" /><br />
<!-- same class on all 3 -->
<a href="" title="Switch" class="menulink">DE</a>
<a href="" title="Switch" class="menulink">EN</a>
<a href="" title="Switch" class="menulink">FR</a>

CSS：

/* The default (or "not selected") style */
.menulink {
    background-image: url("http://placehold.it/333");
}

.menulink.selected {
    background-image: url("http://placehold.it/333/fe3/img/picture2.jpg");
}

JavaScript：

$(function() {
    $('.menulink').click(function (e) {
        e.preventDefault();

        $('.menulink.selected').removeClass('selected');
        $(this).addClass('selected');
    });
});
于 2012-10-20T12:02:35.333 に答える
0 
    $('.menulink').click(function(e){
        e.preventDefault();
        $("#bg").toggleClass('cls2')
    });

    $('.menulink2').click(function(e){
        e.preventDefault();
        $("#bg").toggleClass('cls3')
    });

    $('.menulink3').click(function(e){
        e.preventDefault();
        $("#bg").toggleClass('cls4')
    });

http://jsfiddle.net/sameerast/5XXdJ/39/ 私はあなたのフィドルに変更を加えました、このフィドルはあなたを助けるかもしれません。

于 2012-10-20T12:26:03.357 に答える