Highlighting a link in a list using a Jquery click event

I want to implement a feature where an image is highlighted when it is clicked and stays highlighted until something else is clicked. I have the following HTML snippet:

<div class="container-fluid d-flex justify-content-center" id="searchLogos">
  <ul class="list-inline mx-auto justify-content-center" id="searchLogos">
    <li class="list-inline-item">
      <a href="#">
        <img src="Img/Netflix_Logo_RGB.png" id='netflix' alt="Button to select netflix" style="width:75px;height:75px;">
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <img src="Img/amazon-logo.png" alt="Button to select prime" style="width:75px;height:75px">
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <img src="Img/hulu-digital-blkgrn.png" alt="Button to select Hulu" style="width:75px;height:75px">
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <img src="Img/Disney+-Logo.wine.png" alt="Button to select Disney+" style="width:75px;height:75px">
      </a>
    </li>
  </ul>
</div>
htmljquerycssbootstrap-4

Answer №1

Make sure to place this code right after the jquery script in your HTML file.


    <script>
        $('#searchLogos a').click(function() {
             $(this).toggleClass('selected');
        });
    </script>

Check your browser console for any errors, you may see something like:

Error: $ is not defined

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

Discover the best method for combining and comparing arrays using jQuery

Currently, I have two arrays: existing_names = username1, username2, username3; new_names = username1, username4, username5; I want my final array to be like this: final_names = username1, username2, username3, username4, username5; Is there a way to ...

jqueryarrays

Is there a way to improve the efficiency of this jQuery function that toggles the image source?

I have implemented a functionality that seems to work, but I'm unsure if it's the most efficient solution. I couldn't find a ready-made 'copy-paste' solution online, so I ended up writing this code myself. I am sticking with the &l ...

javascriptjqueryperformanceoptimization

React, facing the challenge of preserving stored data in localStorage while accounting for the impact of useEffect upon

Seeking some assistance with the useEffect() hook in my Taking Notes App. I've set up two separate useEffects to ensure data persistence: one for when the page first loads or refreshes, and another for when a new note is added. I've added some l ...

javascripthtmlreactjsdom

Troubleshooting a problem with media queries causing display:none issues

Check out this HTML email template code we've been testing on various email clients including Gmail, Yahoo, Outlook, Rediffmail, iPhone, and iPad. The template consists of two table blocks - one for web browsers and the other for mobile devices like ...

cssipademailoutlookmedia

Flashes hidden DIV in a split second using JavaScript cookies

I have set up a pop-up lightbox on my webpage along with a cookie using JavaScript to display the lightbox every 15 days. The code functions as intended, but if I continue refreshing the page to check the cookie status, the lightbox briefly flashes on the ...

javascripthtmlcookieslightboxhidden

Is the "supports" feature supported by the browser?

As I make my return to web development after some time away, I can't help but wonder if the ancient art of CSS hacks could be the solution to bridging the gap between modern @supports queries and outdated browsers that don't support these feature ...

javascripthtmlcssmedia-queries

AngularJS table with resizable columns for seamless data browsing

Most examples of expandable tables using ng-repeat feature a separate content for the expanded row, like an independent table inside the detail row. I have implemented many expandable tables using these methods, similar to the following: <tr ng-repeat ...

htmlangularjsangularjs-ng-repeat

Guide on creating a line chart resembling the one in Highcharts library

I would like to create a line chart using the HighChart library, using data similar to what is shown in the image below. However, I am not familiar with HTML, CSS, or JavaScript and don't know how to go about developing this. Can anyone provide guidan ...

javascripthtmlcsshighchartsdata-visualization

Developing a standard jQuery function for adding event listeners

Attempting to replicate the functionality of Google Maps' addListener using jQuery listeners for clicks, keypresses, etc. In Moogle Maps, you can use .event.addListener(map, 'click', function()... or switch 'click' with 'drag ...

javascriptjquery

How to update the border color of focused elements in ExtJS?

In my ExtJS application running on ExtJS 6 with the default Theme-Triton, I am looking to customize the focus border color. Is there a solution to modify the CSS property that will globally change the focus border color from blue to red, for instance? ...

cssextjs

Forward from the Ajax PHP script

I am currently working with a form that looks like this: <form action="process.php" method="post"> <input type="text" name="input" /> <button type="submit">Submit</button> </form> In addition to the form, I have an A ...

javascriptphpjqueryhtmlajax

Using jQuery Ajax to Retrieve Selected Text from an ASP.NET Dropdown List in CodeBehind After Binding

I have successfully bound an asp.net DropDownList using a jQuery ajax call. Now, I am trying to get the selected text from the code behind. How can I achieve this? <asp:DropDownList runat="server" ID="DropdownCounty" DataValueFiel ...

c#jqueryasp.netajax

jquery submit is not functioning as expected

I need assistance with a form <form id="formModLezione" method="post"> Currently, I am attempting to execute the following code: var messaggio=""; var url = "EsistonoIscritti"; var xmlHttp = new XMLHttpRequest(); xmlHttp.open("POST", url, ...

jqueryajaxformssubmitconfirm

Looking to enhance code readability using regular expressions

While I am not a programmer, I enjoy exploring and learning new things. Here is what I have: 1) My URL is structured like this: http://site.com/#!/show/me/stuff/1-12/ 2) I have a jQuery pagination script that displays the number of available pages. Each ...

javascriptjqueryregex

Align two items to the left and right sides of a container without using absolute positioning

I'm attempting to create a container with two elements inside: an <h2> and a <button>. I want them to be positioned on opposite sides (left and right) of the container. Currently, I've achieved this using absolute positioning for the ...

htmlcss

Design an HTML watermark input that remains visible as the user starts typing

I'm currently in the process of developing an application that enables businesses to access their account through theirname.mydomain.com. I am working on creating a signup form for this purpose. Today, I stumbled upon squarespace and noticed they hav ...

jqueryhtml

Guide on aligning text below an image at the same height through flexbox styling

I am trying to use flexbox to make two images side by side have the same height and align the text under the image. Can anyone assist me with this issue? Here is the code I am currently using: .row{ display:flex; } .cell img{ width:150px ...

htmlcssflexboxgrid

Utilizing Bootstrap's column grid system (col-sm) to set the width of form controls

Is it possible to utilize col-sm or col-xs within the input tag to specify its width? <div> <input type="button" class="col-sm-2" value="Clear"> <input type="button" class="col-sm-2" value="Confirm"> </div> ...

htmltwitter-bootstrapcsscoding-style

Unusual SVG Cubic Bezier Animation Transforming Curves into Points and Lines

As a beginner in SVG CSS animation, I am currently working on morphing three curved paths into three rectangles using cubic bezier routes. While I have managed to make it work, there is an issue during the transition where parts of it skew inward in a stra ...

cssanimationsvg

vertical lines alongside the y-axis in a d3 bar graph

https://jsfiddle.net/betasquirrel/pnyn7vzj/1/ showcases the method for adding horizontal lines along the y axis in this plunkr. I attempted to implement the following CSS code: .axis path, .axis line { fill: none; stroke: #000; } I am lo ...

javascriptcssd3.js