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”具有默认的白色背景图像，如果我单击链接，背景图像将变为选定状态的黑色图像。

如果我现在单击“en”，它将使用白色背景图像将“de”链接更改回非活动状态，并将“en”bg-image-link 设置为选定的 state-imagelink，如果单击另一个链接，则会将其删除.

我希望有人有一个想法:)

4

5 回答 5

0

你可以试试这个，我想你正在寻找这种 jquery

$(this).css("背景图片", "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 
 <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 
    $('.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 回答