Switch Picture on Active List Item

I've implemented a two-tab content slider specifically for the mobile section of my website. Users can click on the linked image within the <li> element to load the corresponding content. My goal is to have the image change color when in an "active" state, essentially loading a new image when clicked by the user.

Keep in mind that this feature is intended only for mobile sites, so please tailor your solutions accordingly. Thank you all!

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

Answer №1

After reviewing your request, it seems like you want the image to change when clicked by the user. Since there are only two images involved, we can implement the following solution:

Firstly, assign a unique id to each of your target images:

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

Next, add JavaScript OnClick events for each image that not only changes the clicked image but also resets the other image accordingly:

$('#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

Take a look at this demonstration for guidance

View Demo

$(".click-me-button").on("click", function(){
  $(".item").each(function(index){
    $("#item"+(index+1)+" img").attr('src', images[index]); 
  });
  
  var clickedId = $(this).attr('id');
  var itemId = clickedId.split('item')[1];
  $("#item"+itemId+" img").attr('src', placeholders[itemId-1]); 
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered while attempting to load external JSON file from server in AngularJS

Currently, I am attempting to load a JSON file from the server. Below is my services.js file: angular.module('starter.services', []) /** * A simple example service that returns some data. */ .factory('Friends', function($http) { ...

javascriptjsonangularjsionic-framework

2 unique personalized classes with individualized modifications

Is it feasible to create 2 distinct custom (a tag) classes, each with unique class names? For Instance: When I try to use these in my HTML code, I struggle to create 2 different styles for (a tag) with different names! <a class="type1" href="#">te ...

htmlcss

I am trying to update the content in ckeditor when a different option is selected, but for some reason it is not working

jquery issue: the jquery that I added and the content doesn't change even though the "alert(model);" works fine <script> $(document).ready(function() { $("select.modele").change(function() { var modele = $(this) ...

javascripthtmljquerylaravelselect

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

javascriptjquerycsscookiesdocument-body

Is the functionality of defineProperty for elements malfunctioning on iOS6?

There seems to be an issue with JavaScript's defineProperty and __defineSetter not working on elements in iOS6. It functions correctly on all other browsers and earlier versions of iOS. Does anyone have more information on this? <input id='Bu ...

javascriptios6defineproperty

How to perfectly align responsive email on iPhone 6

My email design appears aligned to the left on iPhone 6 even though I have used align="center" on the tables and TD's. In my media queries, I have specified a width of 320px with the main table set to width="100%". @media only screen and (max-device- ...

htmlcssmedia-querieshtml-emailiphone-6

Utilize the dynamic backlash/Werkzeug debugger during an unsuccessful AJAX request on a TurboGears server

TurboGears offers the unique feature of "backlash," an interactive debugger within the browser that is built on the Werkzeug Debugger. When server-side debugging is enabled, in case of a request failure, an interactive web page is displayed where users can ...

jqueryajaxangularjsdebuggingturbogears2

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

(Just when I thought I've encountered all the strange IE CSS bugs, here comes another one. Is there a name for this double-vertical-padding bug?) After creating a simple test case that worked perfectly in browsers like FF and Opera, I was surprised t ...

cssinternet-explorer

What is the best way to verify an email address in Vue.js?

Issue with email validation using regex in Vue.js <div class="input-wrapper"> <div class="email-icon"></div> <input type="email" v-model.trim="$v.email.$model" v-validate="'required'" :class="{ 'is-invalid': v ...

javascriptregexvue.js

Incorporating dual CSS stylesheets into a single HTML document

I have been utilizing jsonform from https://github.com/joshfire/jsonform to create forms based on a json schema. However, jsonform requires its own css for the form, while I prefer to use a different css for my website's template. Is there a method t ...

htmlcssruby-on-railsjson

Encountering issues with extension CLI - "Unable to utilize the import statement outside a module"

Recently, I've been attempting to integrate the Afinn-165 node package (https://www.npmjs.com/package/afinn-165) into my Google Chrome extension. The goal is to analyze the sentiment of text scraped from each page. Being a novice in web development, I ...

javascriptnpmgoogle-chrome-extensionimporterror

Ways to invoke a function in HTML aside from using the (click)="function()" syntax

How can I display data from a GET request to the WordPress API as the page loads in an Ionic app using Angular? I am able to retrieve my desired post list, but only when I use a button click event to call the method in the HTML. Since this is my first att ...

htmlangulartypescriptionic-framework

Creating variable assignments based on object properties

I am facing a dilemma with a simple object that contains constants. { KEY1: "value1", KEY2: "value2" } I am looking for a way to make these constants accessible globally. Currently, I have to use Config.KEY1 to access the values globally, but I w ...

javascriptnode.js

Using the jQuery plugin multiple times within one website

I have a decent understanding of jQuery and I'm in the process of developing a plugin. Specifically, it's a dropdown element that I'm working on. Everything functions correctly when there's only one dropdown on the site. However, when ...

javascriptjqueryhtmlcss

Aligning a bootstrap button group at the center of a container

Looking for suggestions on how to center a Bootstrap button group (btn-group) within an element? For instance, consider the following structure: <div id='toolbar'> <div class="btn-group"> <button type="button" class="b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the method to process a JSON path containing a special character like "@"?

I'm attempting to retrieve JSON data from an API with the following structure. My current approach involves using JavaScript. The code snippet I have utilized is displayed below. <p>"stations": [</p> <p id="data"></p> ...

javascriptjqueryhtmljson

What steps are needed to switch colors after a loop has been clicked?

I have a loop setup like this: data: { show: false } .test { hight: 10px; background-color: red; } .test2 { hight: 15px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div v-for="value in da ...

javascriptloopsvue.jsbind

Exploring the integration of foreign languages within C# code?

In search of a C# expert who can assist me with a question I've been struggling to find an answer for all day. Google searches have yielded outdated information, and I need fresh insight. Wondering if there's a way to incorporate CSS and HTML in ...

c#css.netwinforms

Managing class values with Selenium - Manipulating and updating classes

In the program I'm working on, there is a need to toggle which element receives the class value of "selected". <div class="countryValues"> <div data-val="" >USA and Canada</div> <div data-val="US" >USA - All< ...

pythonhtmlseleniumclasstags

The ajaxStart event does not seem to be triggering when clicked on

I am having trouble adding a loader to my site using the ajaxStart and ajaxStop requests to show and hide a div. The issue is that these requests are not being triggered by button onclick events. <style> // CSS for loader // Another class with o ...

javascriptjqueryajax