html - 为每个类别更改唯一的 div 背景颜色

Question

我有一个基于 5 类的菜单:主菜、配菜、沙拉、汤和沙拉。

每个类别将有 1 个或多个产品。

当用户点击一个产品时，我想修改 div 的背景颜色，但我想在每个类别上只选择一个产品，所以如果用户将有 3 个产品并且他点击第一个产品，背景颜色会改变，之后，如果他点击第二个产品，第一个 div 将恢复正常的背景颜色(白色或类似的东西)，第二个 div 的背景颜色将有另一种颜色(蓝色或像这样的东西)。

为了更好地理解，这就是我想看到的结尾:

主菜maindish1(普通背景颜色/未选中) maindish2(普通背景颜色/未选中) maindish3(另一种背景颜色/选中)

Trimmings trimming1(正常背景颜色/未选择) trimming1(另一种背景颜色/已选择) trimming1(正常背景颜色/未选择)

沙拉 salad1(普通背景色/未选) salad2(另一种背景色/已选)

Soup soup1(另一种背景颜色/选中) soup2(普通背景颜色/未选中)

Desert desert1(另一种背景色/已选)

我试过使用 :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;
    }
}

Answer 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>

工作 fiddle here