如何在单击时更改顺序数字元素的CSS？

Question

我使用jQuery为我的菜单项生成顺序编号。

单击时，超链接文本变为红色。但是，这里的问题是，当单击超链接(活动)时，我希望相应的数字也变成红色。

例如，当点击“为什么需要它”时，文本就会完全变红。但是我需要1号的背景色也变成红色。

我试着换课，但没起作用。

这是JS。

jQuery(function ($) {
$(".menu-solutions-menus-container ul li").each(function (i, el) {  $(this).children('a').prepend("<number>" + (i + 1.) + "</number>");
});



$('.local-scroll').click(function (event) {
    event.preventDefault();

    var full_url = this.href;

    var parts = full_url.split('#');
    var trgt = parts[1];

    var target_offset = $('#' + trgt).offset();
    var target_top = target_offset.top;

    $('html, body').animate({
        scrollTop: target_top
    }, 500);


});

$('.menu-solutions-menus-container a').click(function () {
    $('.menu-solutions-menus-container a').removeClass('active');
    $(this).addClass('active');
});

$('.number').click(function () {
    $('.number').removeClass('active');
    $(this).addClass('active');
});

这是jsfiddle工作空间。(如果看不到数字，则将jQuery版本更改为jQuery 1.7.2或更高版本。)

这个站点中的辅助菜单是我真正想要实现它的地方。

提前谢谢。

Answer 1

你的类名只需要一个星期就行了

变化

number.active {
    background: white;
}

至

.active number {
    background: red;
}

编辑(解释)

CSS选择器number.active正在寻找一个具有类似于number的active类的html元素<number class="active" />，但是您的<number class="active" />显示的是您希望父<a>具有<number>的子节点的活动。

为此，您将父类放在第一位，然后是一个空格，以注意父类的子节点，然后是要针对的元素。

因此：

parentElement.parentClass childElement.childClass {
    defs
}

你可以写

a.active number {
    background: red
}

为顶部栏编辑2：

有几件事，第一，灰色区域实际上是背景色，而不是边框。其次，CSS选择器正在寻找"active“的父类，但是您的”活动“是<li>的子类。

<li id="menu-item-205" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-205">
    <a href="#what-we-offer" class="active"></a>
</li>

您可以做的是让li像下面这样获得active类

$('.menu-solutions-menus-container a').click(function () {
    $('.menu-solutions-menus-container a').removeClass('active');
    $(this).parent('li').addClass('active');
});

$('.number').click(function () {
    $('.number').removeClass('active');
    $(this).parent('li').addClass('active');
});


$('.menu-solutions-menus-container a').click(function(){
     $('ul.shortcode_menu.solution-menu li').removeClass('active');
     $(this).parent('li').addClass('active');
});

然后更改CSS以反映<li>是带有active类的元素。

ul.shortcode_menu.solution-menu li.active {
    background: black;
}

我再次将其改为background: black，而不是border-top，因为我认为这是您想要的效果。