Alter the color of a link upon clicking with Jquery

Question

Alter the color of a link upon clicking with Jquery

I have written this code in HTML/CSS and jQuery:

$('.myFilters li').click(function() {
    $(".category").hide();
    var v = $(this).text()[0];
    $('.title li').hide().filter(function() {
        return $(this).text().toUpperCase()[0] == v;
        $(".category:first").show();
    }).show().first().find('a[data-toggle]:first').trigger('click');
})

$("a[data-toggle]").on("click", function(e) {
    e.preventDefault(); // prevent navigating
    var selector = $(this).data("toggle"); // get corresponding element
    $(".category").hide();
    $(selector).show();
});


$('.myFilters li:first').trigger('click');

The CSS snippet:

.myFilters,
.title {
margin: 0;
padding: 0;
}

/* more CSS styles here */

The JavaScript provided:

A
B
C

When a letter is clicked, the corresponding categories and companies are displayed. I am looking to change the color of the clicked letter and background of the category when clicked. Thank you for any assistance!

javascript jquery html css

Answer 1

Answer №1

For a solution, check out this code snippet

$('.myFilters li').click(function() {
    $('.myFilters li').find('a').removeClass('red');
    $(this).find('a').addClass('red');
    $(".category").hide();
    var letter = $(this).text()[0]
    $('.title li').hide().filter(function() {
        return $(this).text().toUpperCase()[0] == letter;
        $(".category:first").show();
    }).show().first().find('a[data-toggle]:first').trigger('click');
})

$("a[data-toggle]").on("click", function(e) {
    e.preventDefault(); // prevent navigating
    var selector = $(this).data("toggle"); // get corresponding element
    $(".category").hide();
    $(selector).show();
});


$('.myFilters li:first').trigger('click');
//$('.title li:first a[data-toggle]').trigger('click');

Answer 2

For a solution, check out this code snippet

$('.myFilters li').click(function() {
    $('.myFilters li').find('a').removeClass('red');
    $(this).find('a').addClass('red');
    $(".category").hide();
    var letter = $(this).text()[0]
    $('.title li').hide().filter(function() {
        return $(this).text().toUpperCase()[0] == letter;
        $(".category:first").show();
    }).show().first().find('a[data-toggle]:first').trigger('click');
})

$("a[data-toggle]").on("click", function(e) {
    e.preventDefault(); // prevent navigating
    var selector = $(this).data("toggle"); // get corresponding element
    $(".category").hide();
    $(selector).show();
});


$('.myFilters li:first').trigger('click');
//$('.title li:first a[data-toggle]').trigger('click');

Answer 3

Answer №2

Have you considered trying something similar to this code snippet? http://jsfiddle.net/wdg9khL5/ ?

$('.myFilters li').click(function() {
  $(".category").hide();
  var v = $(this).text()[0];
  var c = $(this).data("color");
  $('.myFilters li a').css("color", "black");
  $("a", this).css("color", c);
  $('.title li').hide().filter(function() {
      return $(this).text().toUpperCase()[0] == v;
      $(".category:first").show();
  }).show().first().find('a[data-toggle]:first').trigger('click');
})

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault(); // prevent navigating
  var selector = $(this).data("toggle"); // get corresponding element
  $(".category").hide();
  $(selector).show();
});


$('.myFilters li:first').trigger('click');

$('.filter > ul > li > a').on("click", function(e){
   // Reset all link colors
   $('.filter > ul > li > a').css("color", 'red');
   $('.filter > ul > li').css("border", '1px solid red');

   $(this).css("color", 'green');
   $(this).parent('li').css("border", '1px solid green');
});

Answer 4

Have you considered trying something similar to this code snippet? http://jsfiddle.net/wdg9khL5/ ?

$('.myFilters li').click(function() {
  $(".category").hide();
  var v = $(this).text()[0];
  var c = $(this).data("color");
  $('.myFilters li a').css("color", "black");
  $("a", this).css("color", c);
  $('.title li').hide().filter(function() {
      return $(this).text().toUpperCase()[0] == v;
      $(".category:first").show();
  }).show().first().find('a[data-toggle]:first').trigger('click');
})

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault(); // prevent navigating
  var selector = $(this).data("toggle"); // get corresponding element
  $(".category").hide();
  $(selector).show();
});


$('.myFilters li:first').trigger('click');

$('.filter > ul > li > a').on("click", function(e){
   // Reset all link colors
   $('.filter > ul > li > a').css("color", 'red');
   $('.filter > ul > li').css("border", '1px solid red');

   $(this).css("color", 'green');
   $(this).parent('li').css("border", '1px solid green');
});

Answer 5

Answer №3

If you want to add a custom attribute called data-color, you can follow these steps:

When a user clicks on an element with the class "myFilters li", prevent the default action and do the following:
    //...
    Get the value of the data attribute "color" from the clicked element
    Change the color of the anchor tag inside the clicked element to the specified color
});

Check out this example on Fiddle

Answer 6

If you want to add a custom attribute called data-color, you can follow these steps:

When a user clicks on an element with the class "myFilters li", prevent the default action and do the following:
    //...
    Get the value of the data attribute "color" from the clicked element
    Change the color of the anchor tag inside the clicked element to the specified color
});

Check out this example on Fiddle

Alter the color of a link upon clicking with Jquery

Answer №1

Answer №2

Answer №3

Similar questions

create undirected lists using an array

Establishing the rotation attribute of an SVG circle to create an angular progress tracker

J-Query J-Player does not autoplay

The dropdown feature in the pug navigation bar is malfunctioning

Incorporate a lesson featuring jQuery into your curriculum

Trouble with fetching data from external API due to cross-origin restrictions

Updating the data when session begins

When attempting to delete a resource using an HTTP request in Insomnia, I encountered a TypeError stating that it was unable to read the property 'id'

Effective methods for increasing the height of a column div upon hovering, while also maintaining the position of surrounding columns

Is there a tool available for viewing the HTML5 Web SQL database?

Unable to include property in Mongoose find query object

Having trouble showcasing two unordered lists side by side on a single line

Adjusting jQuery tab content heights to maintain consistent height across tabs and prevent varying heights

Error message: "PHP Object Oriented Programming: jQuery AJAX - Index Not

How do I resolve the problem of Bootstrap column heights? Setting columns to have an automatic height in Bootstrap grid

The functionality of checking all checkboxes is not functioning properly within a custom function

Sort the data in Angular JS by one key, but ensure that results with another key set to 0 remain at the end

Implement a maximum height restriction on the children of the Select component in Material-UI

Having trouble installing node-sass through npm

Incorporating numerous CSS components into a data-bind using Knockout