Javascript 单击Jquery更改链接颜色

我用HTML/CSS和Jquery编写代码：

$（'.myFilters li'）。单击（函数（）{
$（“.category”）.hide（）；
var v=$（this）.text（）[0]
$（'.title li'）.hide（）.filter（函数（）{
返回$（this）.text（）.toUpperCase（）[0]==v；
$（“.category:first”）.show（）；
}).show（）.first（）.find（'a[data toggle]：first'）。trigger（'click'）；
})
$（“a[数据切换]”）。在（“单击”上，函数（e）{
e、 preventDefault（）；//防止导航
变量选择器=$（this）.data（“toggle”）；//获取相应的元素
$（“.category”）.hide（）；
$（选择器）.show（）；
});
$（'.myFilters li:first'）。触发器（'click'）；
//$（'.title li:first a[data toggle]'）。触发器（'click'）
.myFilters，
.头衔{
保证金：0；
填充：0；
}
.myFilters{
显示：内联块；
右边距：10px；
边缘底部：15px；
}
李先生{
显示：内联块；
右边距：10px；
}
Myli a先生{
字体大小：22px；
字体风格：正常！重要；
字体大小：粗体；
文字装饰：无；
颜色：黑色；
}
#菜单导航>li:第一个孩子{
颜色：红色；
}
.头衔{
边缘底部：30px；
}
.李国章{
显示：内联块；
列表样式类型：无；
填充：15px；
背景色：白色；
边框：1px实心#d6205c；
颜色：白色；
右边距：15px；
边缘底部：10px；
填充：0；
}
.标题李a{
显示：块！重要；
颜色：#d6205c；
填充物：5px；
字体风格：正常！重要；
边距：0！重要；
}
.类别{
边缘底部：25px；
边缘顶端：40px；
}













群马


试试看


一个例子

您可以创建
数据颜色
属性。试试这个：

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

试试这个

像这样的东西可能适合你

检查这个，这很简单。感谢您的回复；）我正在尝试对li from.title执行相同的操作，但它不起作用。请用此替换您的第二行，然后选中，$（this.css（'background-color'，'#d6205c'）：）
$('.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');

$('.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');
});