如何使用纯CSS在li处于当前状态时通过单击更改图像？

Question

我想在单击对象时将一张图片更改为另一张图片。代码按以下顺序堆叠：

HTML:

<div class="games-platform-item pt-item">
                    <ul class="games-sub-menu clearfix"> 

                            <li class="tab1 current">
                            <img src="../images/abc11.jpg"/ class="topimgG1" ">
                            <span>编辑精选</span>
                            </li>

                        <li class="tab2">
                        <img src="../images/abc2.jpg"/ class="topimgG2" ">
                        <span>老虎机</span>
                        </li> 

                        <li class="tab3">
                        <img src="../images/abc3.jpg"/ class="topimgG3" ">
                        <span>桌面游戏</span>
                        </li>

                        <li class="tab4">
                        <img src="../images/abc4.jpg"/ class="topimgG4" ">
                        <span>累计大奖</span>
                        </li>

                        <li class="tab5">
                        <img src="../images/abc5.jpg"/ class="topimgG5" ">
                        <span>小游戏</span>
                        </li>    

                        <li class="tab6">
                        <img src="../images/abc6.jpg"/ class="topimgG6" ">  
                        <span>视频扑克</span>
                        </li>    

                        <li class="tab7">
                        <img src="../images/abc7.jpg"/ class="topimgG7" ">
                        <span>所有游戏</span>
                        </li>     

                        <li class="tab8 games-pt-search" style="display:none;"><span>搜索结果</span></li>
                    </ul>

我想做的是：

当点击时，我想将图像更改为彩色版本，即其他图像。现在，我知道我可以使用jquery / JS来完成它。但是我不想使用大量的JS代码来完成如此简单的事情。 是否可以使用更简单的东西来完成？比如CSS中的.current。

我似乎想不出来。

CSS：

- Morgan Ng

---

不过，我有一个有点 hacky 的解决方案，使用背景图像、标签和隐藏的复选框，如果你感兴趣的话。 - Jon P

@JonP 你好JonP，请就此问题提供建议，谢谢。 - Morgan Ng

单纯使用CSS和 [tag:jquery] 标签？真的吗？ - Qwertiy

Answer 1

这里是基本思路。使用CSS精灵可以极大地改进它。使用精灵也会消除单击图像加载的延迟。有关CSS Sprites的介绍，请参见：https://css-tricks.com/css-sprites/ 我没有在这里使用精灵，因为它们很难使用palceholdit来模拟，而我已经将其用于图像。

接下来是代码。我将在之后概述它的功能和关键特点。

/*Hide the Radio Button*/
.games-sub-menu input[type=radio] {
  display: none
}

/*Set a box for the label, this is what is clicked on*/
.games-sub-menu label {
  display: block;
  width: 150px;
  height: 100px;
}

/*Set Images...this would work better with sprites*/
.games-sub-menu label.topimgG1 {
  background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");
}
.games-sub-menu input[type=radio]:checked + label.topimgG1 {
  background-image: url("http://placehold.it/150x100/?text=Image1");
}
.games-sub-menu label.topimgG2 {
  background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");
}
.games-sub-menu input[type=radio]:checked + label.topimgG2 {
  background-image: url("http://placehold.it/150x100/?text=Image2");
}

<div class="games-platform-item pt-item">
  <ul class="games-sub-menu clearfix">
    <li class="tab1 current">
      <input type="radio" name="imgSwap" id="rdoImg1">
      <label class="topimgG1" for="rdoImg1"></label>
      <span>编辑精选</span>
    </li>
    <li class="tab2 current">
      <input type="radio" name="imgSwap" id="rdoImg2">
      <label class="topimgG2" for="rdoImg2"></label>
      <span>编辑精选</span>
    </li>
  </ul>
</div>

基本上这里发生的是隐藏的单选按钮维持了图片的状态。从那里，我们使用checked CSS选择器与相邻兄弟选择器+结合使用来改变标签的背景图片。重要提示：复选框必须紧接在标签前面。您可以使用一般的兄弟选择器，但是复选框仍必须在标签之前。

如果选择不是互斥的，也可以将radio替换为复选框。

您还可以使用链接到页面上的id，并利用:target选择器实现类似的结果。但这会引入页面跳转。

一些我使用类似概念的答案：

• 如何编辑此导航栏以将其更改为单击导航而不是悬停导航？
• 所有CSS手风琴div默认打开（没有jquery）
• https://dev59.com/Rorda4cB1Zd3GeqPMnVB#30115605

- Jon P

---

嗨Jon，非常感谢你的帮助，它完美地运行了。你真是个天才:D - Morgan Ng

Answer 2

使用Jquery很简单。

示例：

$(function() {
 $('.topimgG1').click(function(){
   // First set all to default image
   resetAll();
   // Then set the clicked image to another image.
   $(".topimgG1").attr('src',"../img/<another image>");
   return false;
 });
});

function resetAll()
{
 var arrofIDS= ["topimgG1", "topimgG2", "topimgG3"];

 for (i = 0; i < arrofIDS.length; i++) { 
     $("."+arrofIDS[i]).attr('src',"../img/<default img>");
  }
}

- deviantxdes

---

你好，如何在点击其他图像时从topimgG1中移除彩色图像并将其设置为默认颜色？ - Morgan Ng

请注意，这将需要在单击时加载新图像，因此加载图像可能会有轻微延迟。 - Jon P

我已更新答案；现在点击一张图片后，其他所有图片都会被设置为默认。 - deviantxdes

@xestes 你好，抱歉我对这个jQuery函数还不熟悉，能告诉我如何在 for (i = 0; i < arrofIDS.length; i++) 中插入多个默认图片吗？ $("."+arrofIDS[i]).attr('src',"../img/<default img>"); - Morgan Ng

@MorganNg 只需将所有ID添加到 arrofIDS 数组中。例如：var arrofIDS= ["topimgG1", "topimgG2", "topimgG3", "id4", "id5", "id6", 等等...]; ... 这将把所有这些元素设置为默认图像。 - deviantxdes

@xestes 你好，我认为这个方法不太好用，因为我在HTML中设置的图片并不在CSS中。如果我将ID类的所有元素放入数组中，它会将所有图片都设置为未知的空白图片。 - Morgan Ng

Answer 3

你可以像这样存储备用源代码:

<li class="tab2">
    <img data-alt-src="path/to/alt/img" src="../images/abc2.jpg"/ class="topimgG2" ">
    <span>老虎机</span>
</li>

然后编写这样的脚本：

<script>
    $(function() {
       $('.topimgG').click(function(){
            var src = $(this).attr("src");
            var altSrc = $(this).attr("data-alt-src");
            $(this).attr("src", altsrc);
       });
    });
</script>

其他解决方案可能会或可能不会添加太多的JavaScript代码，但它肯定能够达到您的目的。

- Abhishek Dhanraj Shahdeo

---

嗨，关于这个<img data-alt-src="path/to/alt/img">，是要更改备用图片吗？ - Morgan Ng

在 data-alt-src 属性中，您可以存储备用图像的 URL。 - Abhishek Dhanraj Shahdeo

给你的图片添加相同的类名 topimgG。 - Abhishek Dhanraj Shahdeo

Answer 4

.class:active{background: url(iamge.jpg);
 }

你可以在点击时使用这个活动来临时改变你的图片

- Asifuzzaman Redoy