Изменить изображение на активный <li>

0

У меня есть ползунок содержимого с 2 вкладками для мобильного раздела моего сайта. Пользователь нажимает на связанное изображение внутри элемента <li> и загружает соответствующий контент. Я хотел бы, чтобы изображение меняло цвет в "активном" состоянии, поэтому в значительной степени новое изображение загружалось, когда пользователь нажимает на него.

Это касается только мобильных сайтов, поэтому, пожалуйста, имейте это в виду, предлагая решения. Спасибо всем!!

<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>
  • 1
    Вероятно, вы должны сделать эти изображения с CSS в качестве фона для li и иметь разные фоны для li и li: active. Вы не можете просто изменить цвет изображения, если вы не используете некоторую библиотеку для работы с графикой.
  • 0
    у hover есть проблемы на мобильном телефоне, правда?
Теги:

2 ответа

3
Лучший ответ

Если я правильно понял, когда пользователь нажимает на изображение, изображение меняется. Увидев, что у вас есть только два изображения, мы можем сделать следующее:

Добавьте уникальный идентификатор к целевым изображениям.

<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');
});
Поделиться
  • 0
    Я думал о чем-то в том же духе, но как вернуть его обратно к исходному изображению при нажатии на другое изображение?
  • 1
    Вы также можете сделать это в функции щелчка. $(otherImage).attr('src', 'img/oldImage.png')
Показать ещё 12 комментариев
1

Проверить эту демонстрацию для справки

демонстрация

$(".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]); 
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню