javascript - 切换 div 的类以根据单击哪个按钮显示/隐藏内容

Question

我正在尝试根据为特定类别单击哪个按钮来显示/隐藏菜单项列表。默认情况下/在页面加载时看到最受欢迎。例如，当我点击“开胃菜”按钮时，页面应该从 this 开始。至 this .

我对 jQuery 和 JavaScript 还是很陌生，所以我在让它工作时遇到了一些困难。这是 HTML(精简，只是想显示屏幕截图中看到的内容，而不是所有其他菜单项):

<div class="menu-container">
    <div class="menu-preview">
        <div class="menu-preview-items active">
            <h2>Most Popular</h2>
            <div class="menu-listing">
                <h3>California Roll (8 Pieces)</h3>
                <p>Imi crab, cucumber, avocado, and mayo with sesame</p>
                <p>$3.50</p>
            </div>
            <div class="menu-listing">
                <h3>Dynamite Roll (8 Pieces)</h3>
                <p>Two pieces prawn tempura, yam, cucumber, avocado, masago, letters, and mayo with sesame</p>
                <p>$4.95</p>
            </div>
        </div>
        <div class="menu-preview-items hidden">
            <h2>Appetizers</h2>
            <div class="menu-listing">
                <h3>Edamame</h3>
                <p>Boiled green soy bean with salt.</p>
                <p>$3.50</p>
            </div>
            <div class="menu-listing">
                <h3>Gomae</h3>
                <p>Blanched spinach with sesame seed and peanut sauce.</p>
                <p>$3.50</p>
            </div>
        </div>
    </div>
    <div class="menu-categories">
        <a href="#" class="menu-box">Most Popular</a>
        <a href="#" class="menu-box">Appetizers</a>
        <a href="#" class="menu-box">A La Carte</a>
        <a href="#" class="menu-box">BBQ</a>
        <a href="#" class="menu-box">Salad & Soup</a>
        <a href="#" class="menu-box">Tempura</a>
    </div>
</div>

这是 .active 和 .hidden 类(以及容器)的 CSS:

.active {
    display: none;
}

.hidden {
    display: contents;
}

.menu-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-evenly;
}

这也是我目前拥有的脚本(位于文档的最底部，就在结束正文标记上方):

$('.menu-box').click(function () {
    $('.menu-preview-items').toggleClass('.active');
    // alert('Hello!');
});

我当然会随着时间的推移为所有类别添加更多菜单项，我只是想在我 promise 这样做之前尝试让它工作。我应该向任何东西添加 id 吗？我需要添加/编辑我的任何类(class)名称吗？任何帮助将不胜感激!

Answer 1

你可以试试这个:

更改css

    .active {
display: block;
}

.hidden {
display: none;
}

.menu-container {
margin-top: 15px;
display: flex;
justify-content: space-evenly;
}

html部分

<div class="menu-container">

            <div class="menu-preview">
                <div class="menu-preview-items active most-popular">

                    <h2>Most Popular</h2>

                    <div class="menu-listing">
                        <h3>California Roll (8 Pieces)</h3>
                        <p>Imi crab, cucumber, avocado, and mayo with
                            sesame</p>
                        <p>$3.50</p>
                    </div>

                    <div class="menu-listing">
                        <h3>Dynamite Roll (8 Pieces)</h3>
                        <p>Two pieces prawn tempura, yam, cucumber,
                            avocado, masago, letters, and mayo with sesame</p>
                        <p>$4.95</p>
                    </div>

                </div>

                <div class="menu-preview-items hidden appetizers">

                    <h2>Appetizers</h2>

                    <div class="menu-listing">
                        <h3>Edamame</h3>
                        <p>Boiled green soy bean with salt.</p>
                        <p>$3.50</p>
                    </div>

                    <div class="menu-listing">
                        <h3>Gomae</h3>
                        <p>Blanched spinach with sesame seed and peanut sauce.</p>
                        <p>$3.50</p>
                    </div>

                </div>
            </div>

            <div class="menu-categories">
                <a href="#" class="menu-box" ref="most-popular">Most Popular</a>

                <a href="#" class="menu-box" ref="appetizers">Appetizers</a>

                <a href="#" class="menu-box">A La Carte</a>

                <a href="#" class="menu-box">BBQ</a>

                <a href="#" class="menu-box">Salad & Soup</a>

                <a href="#" class="menu-box">Tempura</a>

            </div>

        </div>

现在是 JQuery

$('.menu-categories .menu-box').on('click',function(){
      $('.menu-preview-items').addClass('hidden');
      $('.menu-preview-items').removeClass('active');
      $('.'+$(this).attr('ref')).removeClass('hidden');
      $('.'+$(this).attr('ref')).addClass('active');
    });