How to change onclick image, and li to current status using pure CSS?

Question

I want to change the image to another image when I click on an object. The code is stacked in the following order:

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> 

What I want to do:

I want to change the image to a color version of the image when it is onclick, i.e. some other image. Now I know that I can use jquery / JS to execute it. But I do not want a huge amount of JS code to execute something so simple. Is it possible to do something simpler? Like .current in CSS

I don't seem to think about that.

CSS:

Answer 1

Here is the basic idea. It can be improved with CSS sprites. Using sprites will also reduce the delay when encoding an image on a click. For an introduction to CSS Sprites, see: https://css-tricks.com/css-sprites/

I did not use sprites here because they are difficult to imitate usind palceholdit, which I used for the image.

Code entry. I will describe what it does and key functions after.

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

Basically, what happens here is a hidden switch that maintains the state of the image. From there, we use the checked CSS selector in combination with the adjacent sibling + selector to create the background image of the label. Important Note The check box must be installed immediately before the label. You can use a common selector, but the flag should be even before the label.

You can also replace radio with a checkbox if the selection is not mutually exclusive.

You can also get a similar result using the id links on the page, and use the :target selector. But this will lead to a page jump.

Some of my answers that use similar concepts:

• How to edit this navigation to make it a click-through navigation, not a hint of navigation?
• All css accordion divs open by default (no jquery)
• fooobar.com/questions/1256797 / ...

Answer 2

Simple with jQuery.

Example:

 $(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>"); } } 

Answer 3

You can save the alternative source as follows:

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

And then write a script like this:

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

Other solutions may or may not add a lot of javascript code, but this will definitely serve your purpose.

Answer 4

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

you can use this asset to temporarily change the image on onclick