Question

在我的网页中，我有以下菜单链接：

<li class="menu1"><a data-menu="#breakfast">Breakfast</a></li>
<li class="menu2"><a data-menu="#lunch">Lunch</a></li>

<div class="row menu-row" id="breakfast"></div>
<div class="row menu-row" id="lunch"></div>

我需要找到#breakfast的div并显示它。以下是我尝试过的内容：

$('.menu-menu li a').click(function () {
    $('.menu-menu li').removeClass('active');
    $('#menu .menu-row').hide(); // hide all
    $(this).attr("data-id").show; //how to find and show the matching div?
});

我该如何做到这一点？

Answer 1

首先，您可以使用data()来检索数据属性，因为它更快。这将返回一个字符串，您可以将其放入选择器以获取所需的元素：

$('.menu-menu li a').click(function () {
    $('.menu-menu li').removeClass('active');
    $('#menu .menu-row').hide();
    $($(this).data('menu')).show(); 
});

鉴于您的HTML，您似乎希望从所点击的项目中检索data-menu值，而不是data-id。另请注意，您错过了show()来电中的尾随括号。

jQuery数据属性显示和隐藏

1 个答案: