CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Muhammad Shifaz
Muhammad Shifaz

Reputation: 5

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

I have used jQuery to generate a sequential numbering for my menu items.

When clicked, the hyperlink text becomes red. However, the problem here is that I want the respective number to turn into red as well when the hyperlink is clicked (active).

Such as when 'WHY YOU NEED IT' is clicked, the text turns red perfectly. But I need the number 1's background color to change into red as well.

I tried replacing classes but it didn't work.

This is the 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.

Thanks a lot in advance.

Upvotes: 0

Views: 402

Answers (1)

Dave Goten
Dave Goten

Reputation: 701

Your class names just need a tweek and this'll work fine

change

number.active {
    background: white;
}

To

.active number {
    background: red;
}

Edit (explanation)

The CSS selector number.active is looking for an html element number that has a class of active like this <number class="active" /> but what your HTML shows is that you wanted the parent <a> to have the active with a child node of <number>.

So to do that you put the parent class first, followed by a space to note a child node of the parent, followed by the element you want to target.

so:

parentElement.parentClass childElement.childClass {
    defs
}

you could write

a.active number {
    background: red
}

Edit 2 for top bars:

There's a few things, the first being that the grey areas are actually background colors, as opposed to borders. Second the CSS selector is looking for a parent class of "active" but your "active" is a child of the <li>'s 

<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>

what you can do is make the li the get the active class like this

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

Then change your CSS to reflect the <li> is the element with the active class.

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

Again I've changed it to background: black instead of border-top, as I think that's the effect you want.

Upvotes: 1

Related Questions