Question

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

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

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

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

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

Trimmings trimming1（正常bg颜色/未选中）trimming1（另一个bg颜色/选中）trimming1（正常bg颜色/未选中）

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

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

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来实现此目的。

＆＃13;

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

＆＃13;

 #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;
    }
}

＆＃13;

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

＆＃13;

工作小提琴here

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

1 个答案: