如何在单击时更改序号元素的CSS

How do I change the CSS for the sequential number element on click?

本文关键字：元素 CSS 单击      更新时间：2023-09-26

我已经使用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或更高版本。）

这个网站的二级菜单是我真正想实现它的地方。

提前非常感谢。

您的类名只需要一个tweek，这将很好地工作

更改

number.active {
    background: white;
}

至

.active number {
    background: red;
}

编辑（解释）

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

因此，要做到这一点，您需要将父类放在第一位，然后是一个空格，用于注释父类的子节点，然后是要作为目标的元素。

所以：

parentElement.parentClass childElement.childClass {
    defs
}

你可以写

a.active number {
    background: red
}

编辑顶部条形图的2：

有几件事，首先是灰色区域实际上是背景色，而不是边界。其次，CSS选择器正在寻找"active"的父类，但您的"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>是具有活动类的元素。

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

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

相关文章：