Javascript 如何在同一网页上使用多个具有不同图像的引导Jumbotron？

我有一个单页应用程序，基本上我有三个标签“主页”、“嘻哈”和“爵士”。当我单击其中一个时，它会在页面顶部显示一个jumbotron，其中包含相应的音乐类型/标题和一张特殊图片。然而，我得到的图像是第三个一爵士正在为所有三个显示。我想确保我能为每一个巨型机器人放上不同的图像

非常感谢您的帮助

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>

---

根据我的评论，看起来你对CSS的概念不正确。不能通过将元素放入容器中来定义元素中声明的样式的范围：在这种意义上，范围化CSS的概念并不存在。相反，将jumbotron的所有通用样式组合在一起，并将背景图像样式留给唯一的可识别选择器：

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

您的DOM应该简化为：

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

---

此外，您应该将标记放置在元素中。

为每个jumbotron指定一个唯一的ID，然后分别设置它们的样式。现在，由于CSS的级联特性，您的最后一个.jumbotron定义将覆盖它之前的所有其他定义。另外，我不知道你为什么要把标签放在你的电脑里。应该放进去。没有范围CSS的概念，它在引入后不久就被弃用了，取而代之的是ShadowDOM。嗨@Suyog！欢迎来到SO！您应该对您的答案进行解释，说明此代码如何解决OP问题。

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