我只有一个页面应用程序,基本上我有三个选项卡“ Home”,“ hip hop”和“ jazz”。当我单击一个时,它会在页面顶部显示一个超大加速器,并带有相应的音乐流派/标题和一张特殊图片。但是,我得到了同时显示的所有三个的图像。我想确保我可以为每个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>
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句