javascript - 单击 Jquery 更改链接颜色

Question

我用 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 {
	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>

当您点击一个字母时，会出现类别及其公司。

我想要的是当你点击一个字母时，这个字母会改变它的颜色。

对于类别也是一样，当你点击一个类别时，它的背景会改变。

感谢您的帮助!

Answer 1

试试这个 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');