javascript - 在 WordPress 中隐藏选项卡

Question

我们正在使用投资组合插件，并为其添加了 4 个类别。除了4个类别外，它还显示全部选项卡，我想隐藏它。

就此而言，需要在 header 中添加类似这样的内容作为附加 JS:

(function($, undefined) {
  $(function() {
    var cats = $('.sort_by_cat .cat');
    cats.filter(':first').hide();
    cats.filter(':nth(1)').find('a').click();
  });
})(jQuery);

这是link到网站。我指的是我们的设计师部分

下的作品集

现在，我应该引用哪些类而不是 .sort_by_cat .cat。

Answer 1

您可以使用 CSS 来完成此操作，只需使用 CSS 选择器(例如 nth-child)定位第一个子级:

.portfolio-category-tab-filter li:nth-child(1) {
    display: none;
}

或者第一个类型:

.portfolio-category-tab-filter li:first-of-type {
    display: none;
}

或者第一个 child :

.portfolio-category-tab-filter li:first-child {
    display: none;
}

使用 CSS 意味着即使用户禁用 JS，该元素仍将被隐藏。

如果您确实需要使用 JS，那么您可以使用上述任何选择器，如下所示:

var element_to_hide = document.querySelector('.portfolio-category-tab-filter li:first-of-type');

element_to_hide.parentNode.removeChild(element_to_hide);

或者使用 jQuery，您可以使用 .remove()它将元素及其内部的所有内容从 DOM 中取出:

jQuery('.portfolio-category-tab-filter li:first-of-type').remove();