У меня есть одностраничное приложение, и в основном у меня есть три вкладки «Домой», «Хип-хоп» и «Джаз». Когда я нажимаю один, в верхней части страницы отображается жумботрон с соответствующим музыкальным жанром / названием и специальной картинкой. Тем не менее, я получаю изображение третьего (джаз), отображаемого для всех трех. Я хочу убедиться, что я могу поставить разные изображения для каждого 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>
1
user11312051 13 Апр 2019 в 23:12

2 ответа

Лучший ответ
<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>
-1
Suyog Navgale 13 Апр 2019 в 20:49

Согласно моему комментарию, похоже, у вас неправильное представление о CSS. Вы не можете "охватить" стили, объявленные в элементе <style>, поместив его в контейнер: концепция CSS с областью действия в этом смысле не существует. Вместо этого объедините все общие стили вашего jumbotron и оставьте стиль 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>.

0
Terry 13 Апр 2019 в 20:35