Html 菜单列表问题

我使class=“selected”在项目高亮显示的情况下正常工作

我的问题是，我有一个列表，其中我需要先加载“选定”菜单项，这意味着带有class=“selected”的菜单项仅在网站加载时显示其内容。每个菜单项加载一系列图像和视频。单独单击每个菜单仅显示所需的图像或视频。太好了

现在发生的事情是，当您第一次访问网站时，每个列表中的所有项目都被加载并显示。我必须选择另一个菜单项，他们在我的“已选”菜单项上单击后退，以便只显示该菜单项

我如何才能进入我的网站，只让“选定”菜单项自动加载其内容，而不加载所有其他菜单项内容

任何帮助都将不胜感激

我的测试点在这里

你可以试试：

.type-work a:not(.selected) {
    display: none;
}

但这不会阻止加载所讨论的元素，它只是不会显示它们

编辑：

在仔细查看您的有问题的站点后，我发现您使用了同位素脚本，我建议您改为更改Javascript

尝试添加

filter:'。将选定的“

添加到您的呼叫中，如下所示：

$container.isotope({
          // options
          animationEngine: 'best-available',
          itemSelector : '.item-thumbs',
          layoutMode : 'fitRows',
          filter: '.selected'
        });

---

我更新了我的答案。看一看，我想这可能是你的解决方案。谢谢你，我使用了你给我的东西，首先使所选的不显示加载，这是一个进展，在看了之后，我更改了过滤器：'。选择'为过滤器：'。视频'是第一个菜单项，它工作了。

.type-work a:not(.selected) {
    display: none;
}

$container.isotope({
          // options
          animationEngine: 'best-available',
          itemSelector : '.item-thumbs',
          layoutMode : 'fitRows',
          filter: '.selected'
        });