Question

我的网站移动部分有一个2标签内容滑块。用户单击<li>元素内的链接图像以及相应的内容加载。我希望图像在＆＃34; active＆＃34;中变换颜色。 state，所以当用户点击它时，几乎要加载一个新图像。

这仅适用于移动网站，因此在提供解决方案时请牢记这一点。谢谢大家!!

<div id="tabs" class='tabs no-screen no-ie'>
<ul>
    <li>
        <a href="#tab-1"><img src="img/mobile/bingo.png" width="70" height="70" alt="Super Free Bingo" /></a>
    </li>
    <li>
        <a href="#tab-2"><img src="img/mobile/slots.png" width="70" height="70" alt="Super Free Logo" /></a>
    </li>
</ul>
  <div id='tab-1' class="tab-box">
    <?php include 'includes/sfb.php'; ?>
  </div>
  <div id='tab-2' class="tab-box">
    <?php include 'includes/sfsg.php'; ?>
  </div>
</div>

Answer 1

如果我理解正确，当用户点击图像时，图像会发生变化。看到你只有两张图片，我们可以做到以下几点：

为目标图片添加唯一ID。

<img src="img/mobile/bingo.png" id="image-1">
<img src="img/mobile/slots.png" id="image-2">

为每个图像添加一个JavaScript OnClick事件，该事件也将重置另一个图像。

$('#image-1').click(function() {
    $(this).attr('src', 'img/mobile/newImage1.png');
    $(this).parent().parent().css('background-color', 'white');
    $('#image-2').attr('src', 'img/mobile/slots.png');
    $('#image-2').parent().parent().css('background-color', 'orange');
});

$('#image-2').click(function() {
    $(this).attr('src', 'img/mobile/newImage2.png');
    $(this).parent().parent().css('background-color', 'white');
    $('#image-1').attr('src', 'img/mobile/bingo.png');
    $('#image-1').parent().parent().css('background-color', 'orange');
});

Answer 2

检查此演示以供参考

Demo

$(".a").click(function(){
$(".a").each(function(index){
   $("#id"+(index+1)+" a img").attr('src',a[index]); 
});
var x=$(this).attr('id');
var y=x.split('id')[1];
$("#id"+(y)+" a img").attr('src',b[y-1]); 
});

更改活动<li> </li>上的图像

2 个答案: