Изменить ссылку цвет на кнопку Jquery

Question

I код этого в HTML/CSS и 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 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

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

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

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

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

 
.title { 
 
\t margin-bottom: 30px; 
 
} 
 

 
.title li { 
 
\t display: inline-block; 
 
\t list-style-type: none; 
 
\t padding: 15px; 
 
\t background-color: white; 
 
\t border: 1px solid #d6205c; 
 
\t 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 { 
 
\t margin-bottom: 25px; 
 
\t 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>

При нажатии на букву, категории появляется и его компании.

Что я хочу, когда вы нажимаете на письмо, это письмо меняет цвет.

И то же самое для категорий, КОГДА вы нажимаете на категорию, ее фон меняется.

Спасибо за помощь!

Answer 1

Вы можете создать атрибут data-color. И попробуйте это:

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

Fiddle

Answer 2

Попробуйте 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'); 

Answer 3

Нечто подобное может работать для вас 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'); 
});