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');

Answer 2

这样的事可能适合你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 3

您可以创建data-color属性。试试这个：

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

<强> Fiddle

单击Jquery更改链接颜色

3 个答案: