Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

I have integrated a horizontal scrolling date selector on my website, and it is functioning well. However, I am facing an issue while trying to change the CSS properties of a clicked date link using jQuery. Despite successfully firing the click event, I am unable to target the clicked link correctly for applying the desired CSS changes. The use of a:active or a:visited attributes does not yield the expected result either. Any assistance in resolving this problem would be greatly appreciated.

$("#datePicker a").click(function(event) {
     var date = this.getAttribute("data-date");
     alert('date');
     //future events here
    event.preventDefault();
});

#datecontainer {
  background-color: #a07a3d;
  position: relative;
  text-align: center;
  z-index: 0;
}
#datecontainer {
  display: inline-block;
  padding: 10px 0 16px;
  vertical-align: middle;
  width: 620px;
  z-index: 0;
}
div.moviedatediv div.dates #date-scroller:after {
  content: "";
  height: 5px;
  width: 100%;
  background-color: #f3f3f3;
  z-index: -1;
  position: absolute;
  left: 0px;
  bottom: 0px;
}
.moviedatediv {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  cursor: pointer;
  display: inline-block;


...

...
</div>

javascriptjqueryhtmlcss

Answer №1

If you want to apply the same style as for a:active to a clicked date, update 

#datePicker #datecontainer a:active
to 
#datePicker #datecontainer a:active, #datePicker #datecontainer a.active
. Also, remember to add an active class to the clicked element.

$("#datePicker a").click(function(event) {
  var date = this.getAttribute("data-date");
  alert('date '+date);
  $(this).closest('#datecontainer').find('a.active').removeClass('active');
  $(this).addClass('active');
  //future events here
  event.preventDefault();
});
#datecontainer {
  background-color: #a07a3d;
  position: relative;
  text-align: center;
  z-index: 0;
}

#datecontainer {
  display: inline-block;
  padding: 10px 0 16px;
  vertical-align: middle;
  width: 620px;
  z-index: 0;
}

div.moviedatediv div.dates #date-scroller:after {
  content: "";
  height: 5px;
  width: 100%;
  background-color: #f3f3f3;
  z-index: -1;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.moviedatediv {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  font-family: 'Roboto-bold', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  height: 76px;
  line-height: 1;
  margin: 0 16px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 92px;
  z-index: 1;
  text-transform: uppercase;
}

.moviedatediv a {
  color: #ffffff;
  display: inline-block;
  height: 100%;
  text-decoration: none;
  width: 100%;
  text-transform: uppercase;
}

.moviedatediv a:hover {
  color: #ffffff;
}

.moviedatediv a span.date {
  display: block;
  font-family: 'Roboto-condensed-bold', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1;
}

#datePicker #datecontainer a:active, #datePicker #datecontainer a.active {
  background-color: #d49f38;
  height: 76px;
  left: 0;
  padding-top: 10px;
  position: absolute;
  top: -10px;
  width: 92px;
  z-index: 2;
}

#datePicker #datecontainer a:after {
  border-top: 5px solid #d49f38;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: -5px;
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -5px;
  width: 0;
  height: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dates" id="datePicker">
  <div id="datecontainer" class="slider responsive">
    <div class="moviedatediv">
      <a data-date="2019-02-19" href="#">Tue <span class="date">19</span>February</a>
    </div>
    <div class="moviedatediv">
      <a data-date="2019-02-20" href="#">Wed <span class="date">20</span>February</a>
    </div>
    <div class="moviedatediv">
      <a data-date="2019-02-21" href="#">Thu <span class="date">21</span>February</a>
    </div>
    <div class="moviedatediv">
      <a data-date="2019-02-22" href="#">Fri <span class="date">22</span>February</a>
    </div>
    <div class="moviedatediv">
      <a data-date="2019-02-23" href="#">Sat <span class="date">23</span>February</a>
    </div>
    <div class="moviedatediv">
      <a data-date="2019-02-24" href="#">Sun <span class="date">24</span>February</a>
    </div>
    <div class="moviedatediv">
      <a data-date="2019-02-25" href="#">Mon <span class="date">25</span>February</a>
    </div>
    <div class="moviedatediv">
      <a data-date="2019-02-26" href="#">Tue <span class="date">26</span>February</a>
    </div>
  </div>
</div>

Answer №2

You have the ability to assign a css class to the a element through jquery.

The following jquery code snippet demonstrates how to apply a class to a clicked a tag within a datepicker. Upon clicking any link in the datepicker, $(this).addClass('active') will append the active class to the a tag.

$("#datePicker a").click(function(event) {
     var date = this.getAttribute("data-date");
     $(this).addClass('active');
     alert('date');
    event.preventDefault();
});

Here is the corresponding CSS styling:

.active {
  background-color: #d49f38;
  height: 76px;
  left: 0;
  padding-top: 10px;
  position: absolute;
  top: -10px;
  width: 92px;
  z-index: 2;
}

Answer №3

$("#datePicker a").click(function(event) {
     var date = this.getAttribute("data-date");
     var ele = $(event.target);
     ele.css('background-color', '#d49f38');//applying style
     ele.addClass("active");//adding class
     alert(event.target.value);
     //more events coming soon
    event.preventDefault();
});
#datecontainer {
  background-color: #a07a3d;
  position: relative;
  text-align: center;
  z-index: 0;
}
#datecontainer {
  display: inline-block;
  padding: 10px 0 16px;
  vertical-align: middle;
  width: 620px;
  z-index: 0;
}
div.moviedatediv div.dates #date-scroller:after {
  content: "";
  height: 5px;
  width: 100%;
  background-color: #f3f3f3;
  z-index: -1;
  position: absolute;
  left: 0px;
  bottom: 0px;
}
.moviedatediv {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  font-family: 'Roboto-bold', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  height: 76px;
  line-height: 1;
  margin: 0 16px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 92px;
  z-index: 1;
  text-transform: uppercase;
}
.moviedatediv a {
  color: #ffffff;
  display: inline-block;
  height: 100%;
  text-decoration: none;
  width: 100%;
  text-transform: uppercase;
}
.moviedatediv a:hover {
  color: #ffffff;
}
.moviedatediv a span.date {
  display: block;
  font-family: 'Roboto-condensed-bold', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1;
}
#datePicker #datecontainer a:active {
  background-color: #d49f38;
  height: 76px;
  left: 0;
  padding-top: 10px;
  position: absolute;
  top: -10px;
  width: 92px;
  z-index: 2;
}
#datePicker #datecontainer a:after {
  border-top: 5px solid #d49f38;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: -5px;
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -5px;
  width: 0;
  height: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dates" id="datePicker">
    <div id="datecontainer" class="slider responsive">
<div class="moviedatediv">
<a data-date="2019-02-19" href="#">Tue <span class="date">19</span>February</a>
</div>
<div class="moviedatediv">
<a data-date="2019-02-20" href="#">Wed <span class="date">20</span>February</a>
</div>
<div class="moviedatediv">
<a data-date="2019-02-21" href="#">Thu <span class="date">21</span>February</a>
</div>
<div class="moviedatediv">
<a data-date="2019-02-22" href="#">Fri <span class="date">22</span>February</a>
</div>
<div class="moviedatediv">
<a data-date="2019-02-23" href="#">Sat <span class="date">23</span>February</a>
</div>
<div class="moviedatediv">
<a data-date="2019-02-24" href="#">Sun <span class="date">24</span>February</a>
</div>
<div class="moviedatediv">
<a data-date="2019-02-25" href="#">Mon <span class="date">25</span>February</a>
</div>
<div class="moviedatediv">
<a data-date="2019-02-26" href="#">Tue <span class="date">26</span>February</a>
</div>
</div>
</div>

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

Watch as objects materialize after using the zoom function in THREE.JS

I am facing an issue with THREE.JS involving the addition of 3D text to my scene using the following code: var loader = new THREE.FontLoader(); loader.load( '3rdparty/three.js/fonts/helvetiker_regular.typeface.json',function ( font ) { var ma ...

javascriptthree.js

Learning the art of Javascript programming within the HTML5 realm

Seeking assistance with a JavaScript project - I'm attempting to develop a Bubble Buster game reminiscent of pong, but with multiple bubbles. The goal is to have falling bubbles on screen (roughly 100 in total) in various colors dropping from random l ...

javascripthtml

Attempting to create a functional action listener for a deck of cards game

I'm currently working on a game and want to make an image appear blank when clicked on, to simulate it disappearing. Specifically, this is for a tri peaks solitaire game. I have a function that tests the validity of playing a card, but I'm strugg ...

javascripthtml

The code encountered a parsing error at 11:1, due to the presence of

I'm having trouble with this code. I've searched for answers but haven't found any solutions. Here is the error message: 11:1 error Parsing error: Unexpected token } ✖ 1 problem (1 error, 0 warnings) npm ERR! code ELIFECYCLE npm ERR! ...

javascriptnode.jsnpm

Expand the width and include a placeholder in mat input field for Angular version 5

Currently utilizing a mat input with the code provided, presenting a similar appearance to the screenshot below. I am looking to add a placeholder that disappears once the user begins typing. However, in my current setup, the text shifts upward and floats ...

htmlcssangularangular-material

Printing iframe does not display CSS effects

As I work on developing a program that involves the use of iframes, I have encountered an issue with CSS effects not appearing when trying to print the iframe. Despite applying CSS successfully in browsers like IE, Chrome, Mozilla, and Edge, the printed ou ...

javascriptphpcssajaxiframe

Show the JSON response when making an AJAX request using the POST method

Can someone help me troubleshoot an issue with displaying JSON data using ajax? I'm not getting any results when I submit the form. Any suggestions would be appreciated. project_view.php <form id="formProjectsRepSearch" action="controller.php" me ...

phpjqueryajaxjson

Is there a Unicode character substitution happening?

There are certain mobile browsers that appear to have trouble supporting all unicode characters, such as the down arrow icon like this: span.icon:after { content:"\25be"; } Currently, no symbol is shown. Is there a way for me to identify this i ...

androidhtmlcssmobileunicode

Unlocking $refs with the Composition API in Vue3 - A step-by-step guide

I am currently exploring how to access $refs in Vue 3 using the Composition API. In my template, I have two child components and I specifically need to obtain a reference to one of them: <template> <comp-foo /> <comp-bar ref="ta ...

javascripttypescriptvue.jsvuejs3

Using Python's BeautifulSoup library to extract tables from archived HTML webpages

I'm currently working on extracting data from saved HTML webpages using Python 2.7 + Windows. There are several similar saved HTML webpages, each containing a table with 5 columns and an unspecified number of rows. The source code appears as follows ...

pythonhtmlbeautifulsoupextract

Unable to assign a value to a dropdown using Angular.js and PHP

I am encountering a slight issue with setting the data as a selected value in a dropdown after fetching it from the database. Below is an explanation of my code. plan.html: <div class="input-group bmargindiv1 col-md-12"> <span class="input-g ...

javascriptphpangularjs

React JS simple validator package not functioning properly with post-property date

I am currently utilizing the simple react validator package for form validation in my react JS project. For those interested, you can find the package at this link: https://www.npmjs.com/package/simple-react-validator However, I have encountered an issue w ...

javascriptreactjs

Issue with Vue: Calling method instantly when using :mouseover in v-for within a component

Whenever I try to incorporate :mouseover in a v-for loop within the <component>, I encounter an issue. The method assigned to the :mouseover event is triggered for each element, rather than just for the hovered elements. <Single-technology ...

javascriptvue.js

The error message "props.text is undefined in React Native" indicates that there is an issue with accessing the property text within

//**// import { StatusBar } from 'expo-status-bar'; import {StyleSheet, Text, View, Button, TextInput, ScrollView, FlatList} from 'react-native'; import {useState} from "react"; import GoalItem from "./components/GoalItem"; export defau ...

javascriptreactjsreact-native

The jQuery scripts are having trouble cooperating

Currently, I am in the process of developing a website. The main focus at the moment is on creating a responsive menu and incorporating jQuery scripts. However, I seem to be facing some challenges in getting everything to work seamlessly together. Each scr ...

javascripthtml

Show singular array element upon click

I need help with a specific task. When a button is clicked, I want to display a random item from an array. Each array item should only be displayed once. Currently, my code is set up as follows: When the button is clicked, a random array item is displ ...

javascriptjqueryhtmlcssarrays

Utilize resources from webpack's bundled npm package assets

I've been racking my brain over this issue for quite some time now, and I'm starting to wonder if it's even achievable. Any assistance on this matter would be greatly appreciated! The npm dilemma I have an npm package that serves as a coll ...

javascriptreactjsnpmwebpackassets

Why isn't my Enum functioning properly to display the colored background?

Why isn't the Background Color showing up when I pass in the BGColor Prop dynamically in my next.js + Tailwind app? I have tried passing in the prop for my component, but the color is not appearing. <Title title='This is HOME' descripti ...

javascripttypescriptnext.jstailwind-css

The One-Click File Upload Dilemma

I have replaced the regular upload input + submit button with an icon. My goal is to automatically start the upload process when a file is chosen by the user. However, currently nothing happens after the file selection. <form action="upload.php" method ...

javascriptjqueryhtmlfile-upload

Learn how to render a dynamic checkbox that is connected with AJAX and PHP for seamless functionality

I need to showcase a dynamic checkbox that can be bound using ajax and php. Here is my code: <?php include 'dbconnect.php'; $result = mysqli_query($link, "SELECT * FROM city where district_id='$dist' "); while($city_row=mysqli_fe ...

javascriptphphtmlajax