首页 文章

为每个类别更改div的背景颜色

提问于
浏览 次
0

我有一个基于5个类别的菜单：主菜，配菜，沙拉，汤和沙拉 .

每个类别都有1个或更多产品 .

当用户点击一个产品时，我想修改div的背景颜色，但我希望每个类别只有一个选定的产品，所以如果用户有3个产品并且他点击了第一个产品，背景颜色会改变，之后，如果他点击第二个产品，第一个div将返回正常的背景颜色（白色或类似的东西），第二个div的背景颜色将有另一种颜色（蓝色或类似的东西） ） .

为了更好地理解，这就是我想要看到的结果：

主菜maindish1（正常bg颜色/未选择）maindish2（正常bg颜色/未选择）maindish3（另一种bg颜色/选择）

修剪修剪1（正常bg颜色/未选择）修剪1（另一种bg颜色/选定）修剪1（正常bg颜色/未选择）

沙拉salad1（正常bg颜色/未选择）salad2（另一种bg颜色/选择）

汤soup1（另一种颜色/选择）汤2（正常bg颜色/未选择）

沙漠沙漠1（另一种颜色/选择）

我尝试过使用 :focus ，但这只会改变一个div的背景（或者我做错了） .

HTML：

<div id="menuday-container">
<h1>Meniul zilei</h1>
<div id="menuday-products-container">
    <div id="menuday-main-dish" class="menuday-item">
        <h3 class="product-subtitle">Felul Principal</h3>
        <div class="menuday-items-container">
            <div class="menuday-product" tabindex="1">
                Ceafa de porc
            </div>
            <div class="menuday-product" tabindex="2">
                Carne de berbecut
            </div>
            <div class="menuday-product" tabindex="3">
                Piept de pui
            </div>
        </div>
    </div>
    <div id="menuday-trimming" class="menuday-item">
        <h3 class="product-subtitle">Garnitura</h3>
        <div class="menuday-items-container">
            <div class="menuday-product" tabindex="1">
                Cartofi prajiti
            </div>
            <div class="menuday-product" tabindex="2">
                Cartofi nature
            </div>
        </div>
    </div>
    <div id="menuday-salad" class="menuday-item">
        <h3 class="product-subtitle">Salata</h3>
        <div class="menuday-items-container">
            <div class="menuday-product" tabindex="1">
                Salata de varza
            </div>
            <div class="menuday-product" tabindex="2">
                Salata de sfecla rosie
            </div>
        </div>
    </div>
    <div id="menuday-soup" class="menuday-item">
        <h3 class="product-subtitle">Ciorba</h3>
        <div class="menuday-items-container">
            <div class="menuday-product" tabindex="1">
                Ciorba de perisoare
            </div>
            <div class="menuday-product">
                Ciorba de legume
            </div>
            <div class="menuday-product">
                Ciorba radauteana
            </div>
        </div>
    </div>
    <div id="menuday-desert" class="menuday-item">
        <h3 class="product-subtitle">Desert</h3>
        <div class="menuday-items-container">
            <div class="menuday-product">
                Crema de zahar ars
            </div>
            <div class="menuday-product">
                Clatite cu ciocolata
            </div>
        </div>
    </div>
    <button class="btn btn-primary orange-button-with-transition">Plaseaza comanda</button>
</div>

CSS：

#menuday-container{
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid black;
}
#menuday-container h1{
    text-align: center;
    margin: 30px 0 30px 0;
}
#menuday-products-container{
    display: flex;
    flex-direction: column;
}
.menuday-item{
    flex: 1;
}
.menuday-item h3{
    margin-bottom: 20px;
    text-decoration: underline;
}
.product-subtitle{
    text-align: center;
}
.menuday-items-container{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 30px;
}
.menuday-product{
    text-align: center;
    flex-basis: 25%;
    margin: auto;
    border: 1px solid black;
    font-size: 20px;
    padding: 5px 5px 5px 5px;
}
.menuday-product:hover{
    background-color: #DCD0C0 ;
    cursor: pointer;
}
.menuday-product:focus{
    background: black;
}

@media screen and (max-width: 506px){
    .menuday-items-container{
        flex-direction: column;
    }
    .menuday-product{
        flex-basis: 100%;
        margin-bottom: 25px;
    }
}
html css

1 回答

  • 1

    您可以使用jQuery来实现此目的 .

    $(document).ready(function(){
   $(".menuday-product").click(function(){
    $(this).toggleClass('active');
  })
})

    #menuday-container{
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid black;
}
#menuday-container h1{
    text-align: center;
    margin: 30px 0 30px 0;
}
#menuday-products-container{
    display: flex;
    flex-direction: column;
}
.menuday-item{
    flex: 1;
}
.menuday-item h3{
    margin-bottom: 20px;
    text-decoration: underline;
}
.product-subtitle{
    text-align: center;
}
.menuday-items-container{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 30px;
}
.menuday-product{
    text-align: center;
    flex-basis: 25%;
    margin: auto;
    border: 1px solid black;
    font-size: 20px;
    padding: 5px 5px 5px 5px;
}
.menuday-product:hover{
    background-color: #DCD0C0 ;
    cursor: pointer;
}
.menuday-product:focus{
    /* background: black; */
}

.menuday-product.active {
  background-color: #00ccdd;
  color: white;
}

@media screen and (max-width: 506px){
    .menuday-items-container{
        flex-direction: column;
    }
    .menuday-product{
        flex-basis: 100%;
        margin-bottom: 25px;
    }
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuday-container">
<h1>Meniul zilei</h1>
<div id="menuday-products-container">
    <div id="menuday-main-dish" class="menuday-item">
        <h3 class="product-subtitle">Felul Principal</h3>
        <div class="menuday-items-container">
            <div class="menuday-product" tabindex="1">
                Ceafa de porc
            </div>
            <div class="menuday-product" tabindex="2">
                Carne de berbecut
            </div>
            <div class="menuday-product" tabindex="3">
                Piept de pui
            </div>
        </div>
    </div>
    <div id="menuday-trimming" class="menuday-item">
        <h3 class="product-subtitle">Garnitura</h3>
        <div class="menuday-items-container">
            <div class="menuday-product" tabindex="1">
                Cartofi prajiti
            </div>
            <div class="menuday-product" tabindex="2">
                Cartofi nature
            </div>
        </div>
    </div>
    <div id="menuday-salad" class="menuday-item">
        <h3 class="product-subtitle">Salata</h3>
        <div class="menuday-items-container">
            <div class="menuday-product" tabindex="1">
                Salata de varza
            </div>
            <div class="menuday-product" tabindex="2">
                Salata de sfecla rosie
            </div>
        </div>
    </div>
    <div id="menuday-soup" class="menuday-item">
        <h3 class="product-subtitle">Ciorba</h3>
        <div class="menuday-items-container">
            <div class="menuday-product" tabindex="1">
                Ciorba de perisoare
            </div>
            <div class="menuday-product">
                Ciorba de legume
            </div>
            <div class="menuday-product">
                Ciorba radauteana
            </div>
        </div>
    </div>
    <div id="menuday-desert" class="menuday-item">
        <h3 class="product-subtitle">Desert</h3>
        <div class="menuday-items-container">
            <div class="menuday-product">
                Crema de zahar ars
            </div>
            <div class="menuday-product">
                Clatite cu ciocolata
            </div>
        </div>
    </div>
    <button class="btn btn-primary orange-button-with-transition">Plaseaza comanda</button>
</div>

    工作小提琴here

    回复于

相关问题