Question

我那个小小提琴

    <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图像，如果单击该链接，bg图像将变为选定状态的黑色图像。

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

我希望有人有个主意：）

Answer 1

我可能会添加对CSS-classes中不同图像的引用，然后在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');
    });
});

Answer 2

 <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/

Answer 3

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

$（this）.css（“background-image”，“url（/active.jpg）”）;

Answer 4

    $('.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/ 我对你的小提琴进行了改动，这个小提琴可以帮助你。

Answer 5

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/

如何在单击页面上的链接时在css中添加和删除背景图像

5 个答案: