Switch the style of a set of thumbnail images when clicked

I am working with a set of thumbnails where one has an "p7_current" class applied, giving it a border, while the rest have an "p7_inactive" class removing the border.

My goal is to have the last clicked thumbnail in a group of 6 to have the "p7_current" class while the others are set to "p7_inactive".

How can I achieve this using jQuery?

<div class="p7_postcard_thumbs">
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc1.jpg" class="p7_current" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc2.jpg" class="p7_inactive" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc3.jpg" class="p7_inactive" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc4.jpg" class="p7_inactive" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc5.jpg" class="p7_inactive" /></a>
    <a href="#" target="p7_postcard_iframe"><img src="images/p7_pc6.jpg" class="p7_inactive" /></a>
</div>
javascriptjqueryhtmlcss

Answer №1

$('.photo_gallery_thumbnails img').click(function(event){
    $('.photo_gallery_thumbnails img').removeClass('current inactive').not(this).addClass('inactive');
    $(this).addClass('current');
});​

View jsFiddle demo

Answer №2

If you want to simplify it to just one line, although it may be a bit less readable:

$('.p7_postcard_thumbs img').click(function(e){
    $(this).addClass('p7_current').closest('div').find('img').not(this).attr('class', 'p7_inactive');
});

​Check out the code in action on JSFiddle: http://jsfiddle.net/lucuma/4jSCM/3/

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

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

javascriptjqueryhtml

How come the text is not centered when I use text-align:center; on my class "text5"?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> ...

htmlcsscenter

Using a jQuery dialog to launch a popup window specifically optimized for Safari browsers

I recently encountered an issue with my plain JavaScript function that opens a pop-up window. It functions perfectly in Chrome and Firefox, but I faced difficulty in Safari due to the default popup blocker preventing the page from opening without any err ...

javascriptjquery

Determining the time variance within a PHP/MySQL/JavaScript platform

Seeking the most efficient method to calculate the time difference from now until a specific point, such as a countdown time. In my scenario, I have an auction with a designated closetime stored in a MySQL record in the format " DATETIME 00-00-000 00:00:0 ...

phpjavascriptajaxdatetime

Combining Protractor, CucumberJS, and Gulp-Protractor results in the browser not closing when a test fails

Hello! I am facing an issue with closing the browser when a test fails. Currently, the browser closes successfully when the test passes. The dependencies I am using are: "cucumber": "^0.9.2", "gulp": "~3.9.0", "gulp-protractor": "^2.1.0", "protractor": ...

javascriptseleniumcucumberprotractorgulp-protractor

Updating information in mysql from html/php can sometimes be a complex process

The issue I am facing involves a "contact" form that is supposed to send data to my database. Everything seems to be working fine with no errors when I access the page from localhost, and it displays the desired result. However, the database (localhost/php ...

phphtmlmysqlinsert

What could be causing the ajax request to not go through?

Check out this function I created that triggers an event when any inputs in an HTML form are changed. Function Snippet: function customEvent(form, element) { var timer; $(element).keyup(function () { clearTimeout(timer); if ($(ele ...

javascriptjqueryajax

jQuery UI Error: e.widget.extend cannot be used as a function

Recently, I made some changes to my jQuery files which now include jQUery UI for using the tooltip feature. However, I am facing an issue where Javascript is throwing the following error: TypeError: e.widget.extend is not a function Can someone provide ...

javascriptjqueryjquery-uijquery-ui-tooltip

Arrange a set of items using AngularJS according to specific criteria

Hello, I'm new to Angular I've created an angular app and you can view it in this plunkr. Can someone guide me on how to sort the list displayed here using angular? I want the course with the flag to always stay on top, while sorting the rest o ...

javascriptangularjs

Placing a table within a div causes the div to expand in width beyond 100%

A situation has arisen where a table with a large number of columns (30 columns) is being affected by the white-space:nowrap style set on each th tag, causing the parent div to stretch unnaturally. How can this issue be resolved and allow for a horizonta ...

htmlcsshtml-table

Error: Unable to locate specified column in Angular Material table

I don't understand why I am encountering this error in my code: ERROR Error: Could not find column with id "continent". I thought I had added the display column part correctly, so I'm unsure why this error is happening. <div class="exa ...

javascriptangulartypescript

Compare the key of one array against the value of another array using jQuery and retrieve any matches

Utilizing $.getJSON to retrieve data from an external .json file containing the following information. { "title_12345":"<span class=\"header-class\">Header</span>", "p_12345":"<span class=\"description-class\"& ...

jqueryarraysjsonobject

The 'getGridMerchantLocationData' function contains duplicate definitions for both DataSource and DataSourceID. Please remove one of the definitions

I am having trouble binding data from a dataset. Can someone review my code and point out where I may be going wrong? The current issue is that it's not binding and throwing an exception: "Both DataSource and DataSourceID are defined on 'getGridm ...

c#asp.nethtml

Babel Compile disrupts the flow of commands

I'm facing an issue while attempting to launch my development server after Babel successfully compiles my files. However, the command chain seems to halt right after Babel displays the compilation success message. Babel has completed compiling 82 f ...

javascriptnode.jsnpmbabeljs

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

I am facing an issue with a Vue component that allows me to zoom in on an image and move it around the container. The problem is, when the image is zoomed in, it moves faster than the mouse due to using the scale transform. Additionally, I noticed that cl ...

javascriptcssvue.js

I am currently working on obtaining images that are saved by their URL within a PHP file. These images are located within a directory named "images."

My code is incomplete and not functioning as expected. $.get("museums.php",function(data,status){ var response=''; //console.log(data); var json = $.parseJSON(data); museums = json.museums; for(let m in museums) { $("#na ...

javascriptphpjson

Customizing the Twitter bootstrap navigation in Wordpress

I've been working on theming my navigation menu using Twitter Bootstrap. I want it to resemble the demo example of a fixed top banner, which can be seen here: http://getbootstrap.com/examples/navbar-fixed-top/ Although I have managed to get it to wor ...

phpjquerycsswordpresstwitter-bootstrap

Introducing Row Offset Enhancement

I am working on a code to create a custom "table" because I require some more intricate features that a regular table cannot provide. <div class="container"> <cfloop index="x" from="1" to="5"> ...

htmlcssbootstrap-4coldfusionbootstrap-5

File-loader mistakenly generates 2 images and associates them with the incorrect one

I have encountered an issue with file-loader where it is creating two separate images in my build folder. One image is named correctly and saved in the correct path, while the other one is named [hash].png (default) and is stored directly in the build dire ...

htmlimagewebpackwebpack-file-loaderfile-loader

Checkbox Hierarchy: Children marked as either Checked or Unchecked based on parent selection

Hello, I have a form that contains nested checkboxes on three levels. Using jQuery, I am trying to check/uncheck all the children when I check a parent level... and if any of the children are unchecked, uncheck the parent as well. I have attempted this m ...

javascriptjquerylistcheckboxnested