I have a single page application, and basically I have three tabs 'Home','hip hop' and 'jazz'. When I click one, it displays a jumbotron at the top of the page with the respective music genre/title and a special picture. However, I get the image of the third one (jazz) being displayed for all three. I want to make sure I can put different images for each Jumbotron.

Would appreciate any help

THIS IS THE FIRST PART - HOME

<div id="Home" class="tabcontent">
    <h3>Home</h3>
    <style>
        .jumbotron{
            margin-top: 20px;
            background-image: url(https://fsmedia.imgix.net/c3/a6/a3/2d/bec0/4173/85f8/effdf05151b4/unfortunately-theres-not-even-a-trailer-for-rick-and-morty-season-4-yet.png)
        }
        .lead{
            font-size:140%;
            color:white;
        }
        .lead2{
            color:white;

        }
        .item{
            width: 100%;
            height:100%
        }
    </style>
        <div class="jumbotron">
        <h1 class="display-4">THE MINISTRY OF MUSIC</h1>
    </div>



THIS IS THE SECOND PART - HIPHOP

<div id="Hiphop" class="tabcontent">
    <h3>Hiphop</h3>
    <style>

        .jumbotron{
            margin-top: 20px;
            background-image: url(http://nerdyrottenscoundrel.com/wp-content/uploads/2015/03/FireplaceOnline-.jpg)
        }
        .lead{
            font-size:140%;
            color:white;
        }
        .lead2{
            color:white;

        }
        .item{
            width: 100%;
            height:100%
        }




    </style>

    <div class="jumbotron">
        <h1 class="display-4"  style="color: white;">HipHop</h1>

    </div>

THE THIRD PART - JAZZ

<div id="Jazz" class="tabcontent">
    <h3>Jazz</h3>
    <style>
        .jumbotron{
            margin-top: 20px;
            background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/701/articles/2015/12/rocky-workout-1515613864.jpg)
        }
        .lead{
            font-size:140%;
            color:white;
        }
        .lead2{
            color:white;

        }
        .item{
            width: 100%;
            height:100%
        }



    </style>

    <div class="jumbotron">
        <h1 class="display-4"  style="color: white;">Jazz</h1>

    </div>

2 Answers

-1
Community On Best Solutions
<style>
    .jumbotron{
        margin-top: 20px;
    }

    .jumbotron--home{
        background-image: url(https://fsmedia.imgix.net/c3/a6/a3/2d/bec0/4173/85f8/effdf05151b4/unfortunately-theres-not-even-a-trailer-for-rick-and-morty-season-4-yet.png)
    }

    .jumbotron--hiphop{
        background-image: url(http://nerdyrottenscoundrel.com/wp-content/uploads/2015/03/FireplaceOnline-.jpg)
    }

    .jumbotron--jazz{
        background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/701/articles/2015/12/rocky-workout-1515613864.jpg)
    }

    .lead{
        font-size:140%;
        color:white;
    }
    .lead2{
        color:white;

    }
    .item{
        width: 100%;
        height:100%
    }

    .display-4 {
        color: white;
    }
</style>

<!--THIS IS THE FIRST PART - HOME-->
<div id="Home" class="tabcontent">
    <h3>Home</h3>
    <div class="jumbotron jumbotron--home">
        <h1 class="display-4">THE MINISTRY OF MUSIC</h1>
    </div>

<!-- THIS IS THE SECOND PART - HIPHOP -->
    <div id="Hiphop" class="tabcontent">
        <h3>Hiphop</h3>
        <div class="jumbotron jumbotron--hiphop">
            <h1 class="display-4">HipHop</h1>
        </div>

<!-- THE THIRD PART - JAZZ -->
    <div id="Jazz" class="tabcontent">
        <h3>Jazz</h3>
        <div class="jumbotron jumbotron--jazz">
            <h1 class="display-4"  style="color: white;">Jazz</h1>
        </div>
0
Terry On

As per my comment, it seems like you have an incorrect concept of CSS. You cannot "scope" the styles declared in a <style> element by shoving it in a container: the concept of scoped CSS does not exist in that sense. Instead, combine all the generic styles of your jumbotron, and leave the background-image styling to unique identifiable selectors:

<style>
.jumbotron{
    margin-top: 20px;
}
.lead{
    font-size:140%;
    color:white;
}
.lead2{
    color:white;

}
.item{
    width: 100%;
    height:100%
}

#Home .jumbotron {
    background-image: url(https://fsmedia.imgix.net/c3/a6/a3/2d/bec0/4173/85f8/effdf05151b4/unfortunately-theres-not-even-a-trailer-for-rick-and-morty-season-4-yet.png);
}

#Hiphop .jumbotron {
    background-image: url(http://nerdyrottenscoundrel.com/wp-content/uploads/2015/03/FireplaceOnline-.jpg);
}

#Jazz .jumbotron {
    background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/701/articles/2015/12/rocky-workout-1515613864.jpg);
}
</style>

And your DOM should be simplified to look as such:

<div id="Home" class="tabcontent">
    <h3>Home</h3>
    <div class="jumbotron">
        <h1 class="display-4">THE MINISTRY OF MUSIC</h1>
    </div>
</div>

<div id="Hiphop" class="tabcontent">
    <h3>Hiphop</h3>
    <div class="jumbotron">
        <h1 class="display-4"  style="color: white;">HipHop</h1>
    </div>
</div>

<div id="Jazz" class="tabcontent">
    <h3>Jazz</h3>
    <div class="jumbotron">
        <h1 class="display-4"  style="color: white;">Jazz</h1>
    </div>
</div>

Also, you should be placing the <style> tags in the <head> element.