Apply a class when a 'child' has an active

Question

Apply a class when a 'child' has an active

Navigation

#1 by (0 votes)

0

I have a doubt that is driving me crazy. Navigate everywhere and I appeal to you.

I need "Next" to disappear ( opacity:0 ) when the first .rojo " .rojo:first-child " has .active . And that Prev disappears but when " .rojo:last-child " has the .active

<div class="carousel-inner">
    <div class="carousel-item active">slide 1</div>
    <div class="carousel-item">slide 2</div>
    <div class="carousel-item">slide 3</div>
</div>

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">Prev</a>

<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">Next</a>

in CSS use selectors, but obviously I do not work because .rojo and .link are not correlated. .rojo is child of .pepe

Note: It is a slider . Next and Prev would be the arrows and I want that in the first slide active% ( .rojo.active ) the previous arrow is not visible, because you can not go back.

I hope you can help me. I embrace the community.

html css

asked by Lisandro Lorenzini 22.11.2018 в 19:37

source

1 answer

How to import data from an excel file to asp.net core 2.1 mvc and then store it in a sql server database with C # language? Pass parameters from a res.render

score 0 · Answer 1

Using jquery is very easy:

function hideButtons() {
    $('.link').show();
    $('.link-2').show();
    if ($('.rojo').first().hasClass('active')) {
        $('.link-2').hide();
    }
    if ($('.rojo').last().hasClass('active')) {
        $('.link').hide();
    }
}

$(document).ready(() => {
    hideButtons();
    $('.link').click(() => {
        hideButtons();
    })
    $('.link-2').click(() => {
        hideButtons();
    })
})

First look at the function hideButtons() . Here first we "show" the two buttons (in case they are hidden) and we also have two if : one that verifies if the first element has the class active , and the other verifies if the last element has the class active . Then hide or show the links Next or Prev as appropriate.

Now look at the second part, jquery works with events, so I assigned a click event to the links with class link and link-2 so that when you click on them check with the function hideButtons() if necessary hide or not some of those two links. I also added hideButtons() within $(document).ready() so that it also checks at the beginning, when the site loads.