我有一个单页应用程序，基本上有三个选项卡“主页”、“嘻哈”和“爵士乐”。当我单击其中一个时，它会在页面顶部显示一个大屏幕，其中包含相应的音乐流派/标题和一张特殊图片。然而，我得到了为所有三个显示第三个(爵士乐)的图像。我想确保可以为每个 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 的概念似乎不正确。您不能“范围”<style> 中声明的样式。元素通过将其插入容器中:从这个意义上讲，作用域 CSS 的概念并不存在。相反，结合大屏幕的所有通用样式，并保留 background-image样式设置为唯一可识别的选择器:
<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>
此外，您应该放置 <style> <head> 中的标签元素。
关于javascript - 如何在同一网页上使用多个具有不同图像的引导巨型屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55669451/