Change link color on click Jquery

Question

I code this 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');
//$('.title li:first a[data-toggle]').trigger('click');

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

.myFilters {
  display:inline-block;
	margin-right: 10px;
	margin-bottom: 15px;
}

.myFilters li {
  display:inline-block;
	margin-right: 10px;
}

.myFilters li a {
	font-size: 22px;
	font-style: normal !important;
	font-weight: bold;
  text-decoration: none;
  color: black;
}

#menu-navigation > li:first-child{
   color:red;
}

.title {
	margin-bottom: 30px;
}

.title li {
	display: inline-block;
	list-style-type: none;
	padding: 15px;
	background-color: white;
	border: 1px solid #d6205c;
	color: white;
    margin-right: 15px;
    margin-bottom: 10px;
    padding: 0;
}

.title li a {
    display: block !important;
    color: #d6205c;
    padding: 5px;
    font-style: normal !important;
    margin: 0 !important;
}


.category {
	margin-bottom: 25px;
	margin-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="myFilters">
    <li data-type="A"><a href="#">A</a></li>
    <li data-type="B"><a href="#">B</a></li>
    <li data-type="C"><a href="#">C</a></li>
</ul>
<div class="filter">
    <ul class="title">
        <li><a href="#" data-toggle="#Assurance">Assurance</a></li>
        <li><a href="#" data-toggle="#Couverture">Couverture</a></li>
        <li><a href="#" data-toggle="#Banque">Banque</a></li>
        <li><a href="#" data-toggle="#Alimentation">Alimentation</a></li>
    </ul>
    <div id="Assurance" class="category">
        <ul>
            <li>Groupama</li>
        </ul>
    </div>
    <div id="Couverture" class="category">
        <ul>
            <li>Try it !</li>
        </ul>
    </div>
    <div id="Alimentation" class="category">
        <ul>
            <li>AN example</li>
        </ul>
    </div>
</div>

When you click on a letter, categories appears and its companies.

What I want is when you click on a letter, this letter changes its color.

And the same for the categories, WHen you click on a category, its background changes.

Thanks for the help !

Check this stackoverflow.com/questions/30472954/…

Elyor
– Elyor

2015-06-01 09:34:05 +00:00
Commented Jun 1, 2015 at 9:34 — Elyor
– Elyor, Commented Jun 1, 2015 at 9:34

stanze · Accepted Answer · 2015-06-01 09:38:56Z

1

Try this fiddle

$('.myFilters li').click(function() {
    $('.myFilters li').find('a').removeClass('red');
    $(this).find('a').addClass('red');
    $(".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');
//$('.title li:first a[data-toggle]').trigger('click');

answered Jun 1, 2015 at 9:38

stanze

2,47814 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Corentin Branquet Over a year ago

That's simple. Thanks for this reply ;)

Corentin Branquet Over a year ago

I'm trying to do the same for the li from .title jsfiddle.net/6eqabkjr/1 but it does not work

stanze Over a year ago

Replace your second line with this and check, $(this).css('background-color', '#d6205c'); :)

Sasa Novakovic · Accepted Answer · 2015-06-01 14:22:25Z

Something like this might work for you 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');
});

Radonirina Maminiaina · Accepted Answer · 2015-06-01 09:43:38Z

0

You can create a data-color attribute. And try this:

$('.myFilters li').on("click", function(e) {
    e.preventDefault(); // prevent navigating
    //...
    var color = $(this).data("color");
    $("a", this).css({color: color});
});

Fiddle

edited Jun 1, 2015 at 9:43

answered Jun 1, 2015 at 9:36

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Collectives™ on Stack Overflow

Change link color on click Jquery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related