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

这是我到目前为止所拥有的脚本（该脚本位于文档的最底部，紧接在body标记上方）：

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

当然，随着时间的推移，我将为所有类别添加更多菜单项，我只是想尝试使其生效，然后再承诺这样做。我应该在任何东西上添加ID吗？我需要添加/编辑任何班级名称吗？任何帮助将不胜感激！

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');
    });

Answer 2

您可以使用JavaScript完成此操作。给每个元素和id设置要显示和隐藏的元素。在您的JavaScript文件中，将这些元素设置为单击触发事件的事件时所需的元素。有多种解决方法。您可以通过以下方式使用纯JavaScript：文献。 getElementById（'id名称'）.remove（）或使用CSS文档。 getElementById（'id名称'）.style.display ='none'或'block'基于显示元素或隐藏元素。

如果您还有其他问题，请随时询问

Answer 3

您缺少将菜单容器单击链接到菜单内容的某种方式。

您将需要向具有menu-listing类的每个div添加ID。

您的每个menu-box链接都需要以某种方式知道要激活哪个menu-listing。您还需要停用所有其他menu-listing。

我建议使用using data-* attributes。这些允许您将属性添加到任何DOM元素。在这种情况下，您需要向引用您关心的menu-box的{{1}}链接添加数据属性。看起来像这样：

菜单列表：

menu-listing

菜单框：

<div id="most-popular" class="menu-preview">
  ...
</div>

最后是jquery：

<a href="#" class="menu-box" data-menu-listing="most-popular">Most Popular</a>

Answer 4

如果愿意，可以在jQuery中使用.hide()和.show()函数。

$(document).ready(function () {
  $("#item2").hide();
  $("#item3").hide();
  $("#item4").hide();
});

function showItem(id) {
  // Hide all of the items
  $('.items').hide();
  
  itemId = "item" + id;
  
  $("#" + itemId).show();
};

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.buttons-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="items-container">
    <p id="item1" class="items">Item1</p>
    <p id="item2" class="items">Item2</p> 
    <p id="item3" class="items">Item3</p> 
    <p id="item4" class="items">Item4</p>
  </div>
  <div class="buttons-container">
    <a id="btn1" href="#" onclick="showItem(1)">Btn1</a>
    <a id="btn2" href="#" onclick="showItem(2)">Btn2</a>
    <a id="btn3" href="#" onclick="showItem(3)">Btn3</a>
    <a id="btn4" href="#" onclick="showItem(4)">Btn4</a>
  </div>
</div>

此代码的作用是隐藏除document.ready上的第一项以外的所有内容（您可以将它们设置为隐藏的类）。然后，当您单击某个项目时，它将隐藏所有类别为items的项目，然后显示与您单击的按钮相对应的项目。

切换div的类别以基于单击的按钮显示/隐藏内容

4 个答案: