Ajax jQuery-根据锚标记筛选div（单击）

假设我有10个div元素，其class.hide，在该div内容中具有不同的类别名称（例如食品、旅游、体育……）

<div id="Categories">
    <div class="hide">Foods are Fruits, Chicken, Rice, Pizza...</div>
    <div class="hide">My Travelling places are Bangalore, Goa, Kolkata..</div>
    <div class="hide">Sports :Cricket, Basket ball, Tennis, ..</div>
          .
          .
</div>

食物有水果，鸡肉，米饭，比萨饼。。。
我的旅行地点是班加罗尔、果阿、加尔各答。。
运动：板球、篮球、网球。。
.
.

假设我有3个锚定标签

<a href="#">Food</a>
<a href="#">Travelling</a>
<a href="#">Sports</a>
         .
         .

.
.

所以，我想用尊重的类别过滤这些div.hide元素

我用复选框做了同样的过滤

<script>
    var $filters = $("input:checkbox[name='fli']"); 

var $categoryContent = $('#Categories .hide');
var $errorMessage = $('#errorMessage');
$filters.click(function() {
    // if any of the checkboxes for Category or team are checked, you want to show div's containing their value, and you want to hide all the rest.
    $categoryContent.hide();
     var $selectedFilters = $filters.filter(':checked');
    if ($selectedFilters.length > 0) {
        $errorMessage.hide();
        $selectedFilters.each(function (i, el) {
            $categoryContent.filter(':contains(' + el.value + ')').show();
        });
    } else {
        $errorMessage.show();
    }

});
</script>

var$filters=$（“输入：复选框[name='fli']”）；
var$categoryContent=$（“#Categories.hide”）；
var$errorMessage=$（“#errorMessage”）；
$filters.单击（函数（）{
//如果选中了Category或team的任何复选框，则需要显示包含其值的div，并隐藏所有其余的div。
$categoryContent.hide（）；
变量$selectedFilters=$filters.filter（':checked'）；
如果（$selectedFilters.length>0）{
$errorMessage.hide（）；
$selectedFilters.每个（功能（i，el）{
$categoryContent.filter（':contains（'+el.value+'））.show（）；
});
}否则{
$errorMessage.show（）；
}
});

但我也想要这个

我怎样才能做到这一点，请任何人帮我

---

谢谢

可以这样做：

HTML:

食物有水果，鸡肉，米饭，比萨饼。。。
我的旅行地点是班加罗尔、果阿、加尔各答。。
运动：板球、篮球、网球。。
食物有水果，鸡肉，米饭，比萨饼。。。

$（'#Categories.hide'）

是一个空的标记选择，如果你想选择所有的

.hide

元素，它应该读

$（'#Categories.hide'）

这里（右链接）如果你点击锚定标签，它会工作：或者我不明白你在找什么。。。你能描述一下你不工作是什么意思吗？如果你想让第一个默认可见，只需删除它的类隐藏：如果有两个或更多的“div.hide”包含食物类别，那么这一次它应该显示所有包含食物类的“div.hide”，我怎么能在你的开场白后预测它？？？你能花2分钟宝贵的时间提供一个反映你愿望的JSFIDLE吗？顺便说一句，你的分类div没有name属性。。。按内容过滤是一种选择，但这是一种非常糟糕的选择。当然……谢谢你花了宝贵的时间

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    $('#Categories > div').addClass('hide')
    $('#Categories > div[data-category-type="'+cat+'"]').removeClass('hide');
});

<div class="nav">
<a href="#" data-category-type="Food">Food</a>

<a href="#" data-category-type="Travelling">Travelling</a>

<a href="#" data-category-type="Sports">Sports</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="Food">Foods are Fruits, Chicken, Rice, Pizza...</div>
    <div class="hide" data-category-type="Travelling">My Travelling places are Bangalore, Goa, Kolkata..</div>
    <div class="hide" data-category-type="Sports">Sports :Cricket, Basket ball, Tennis, ..</div>
    <div class="hide" data-category-type="Food">Foods are Fruits, Chicken, Rice, Pizza...</div>
</div>