如何在同一网页上使用多个具有不同图像的自举超大子?

用户名

我只有一个页面应用程序,基本上我有三个选项卡“ 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>
Suyog navgale
<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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在同一网页上打印帖子数据?

如何在JMeter中使用断言确认在同一网页上两次显示的文本

分类同一网页的不同版本

html-如何在原始内容顶部的图层中打开同一网页中的图像

在同一网页上使用多个audio.js播放列表播放器?

如何在同一网页上添加第二个幻灯片

如何在PF意义上使用具有不同子网的IP连接到同一网络

如何在同一网页中两次使用相同的JavaScript小部件?

有没有一种方法可以链接我的菜单按钮,以便可以滚动到同一网页上的不同部分?

是什么导致同一网页的文本在不同分辨率的屏幕上以不同的方式显示?

在Google Chrome中另存为PDF时,为什么同一网页具有不同的字体大小?

如何在同一网页上的HTML表中显示数据库中的php结果(在一个脚本中)

ASP.NET MVC 运行同一网页的多个实例

如何使用mod_rewrite使用get变量重定向到同一网页?

从 AJAX 调用接收数据后在同一网页上显示接收到的数据

在同一网页上出现2个分页错误

如何将screenrotation固定到同一网页

ReactJS:如何在同一网站上拥有多个SPA

我想要一个带有按钮的搜索框,我可以在其中复制任何图像 URL 并且我希望该图像显示在同一网页上

如何在同一页面上加载具有不同数据的多个Chartjs图表?

量角器无法在同一网页中标识不同div中的定位器

同一网页上的两个jQuery对话框出现问题

如何在一页上使用多个DatePicker控件,每个DatePicker具有不同的区域性?

如何在具有systemd-networkd的同一网关上设置其他路由

使用Macvlan驱动程序时如何从同一网络上的不同主机访问容器

具有相同容器端口连接到同一网络的多个Docker容器

在同一网页中生成2个DOM树

301如何重定向同一网址,但hypen有所不同

如何在同一列上找到具有多个不同值的结果?