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

Here's the jsfiddle workspace. (Change jQuery version to jQuery 1.7.2 or above if you don't see the numbers.)

The secondary menu in this site is where I would really want to implement it.

提前多多感谢。

Answer 1

你的班级名称只需要一个微调，这样就可以了。

变化

number.active {
    background: white;
}

要

.active number {
    background: red;
}

编辑（解释）

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

所以要做到这一点，你先把父类放在第一位，然后是一个空格来记下父节点的子节点，然后是你想要定位的元素。

这样：

parentElement.parentClass childElement.childClass {
    defs
}

你可以写

a.active number {
    background: red
}

为顶栏编辑2：

有一些东西，第一个是灰色区域实际上是背景颜色，而不是边框。其次，CSS选择器正在寻找＆＃34; active＆＃34;的父类。但你的活跃＆＃34;是<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，因为我认为这是您想要的效果。

如何在点击时更改序列号元素的CSS？

1 个答案: