html - 如何使用导航订购列表？

Question

我正在尝试创建一种使用导航栏将列表排序到特定部分的方法。例如，所有列表项都显示在“全部”下，然后是将列表细化为其他 3 个部分的选项。

当前示例 https://ibb.co/pvBV4Lf

有没有人对如何实现这一目标有任何建议？有什么例子吗？我什至不确定你会给这种函数起什么名字

<div class="nav">
    <a href="#"><h1>All</h1></a>
    <a href="#"><h1><span>Residential</span></h1></a>
    <a href="#"><h1><span>Commercial</span></h1></a>
    <a href="#"><h1><span>Retail</span></h1></a>
</div> 

<ul>
        <a href="#"><li>Granville Place</li></a><br>
        <a href="#"><li>Palisade</li></a><br>
        <a href="#"><li>King &amp; Phillip</li></a><br>
        <a href="#"><li>Castle Residences</li></a><br>
        <a href="#"><li>Opera Residences</li></a><br>
        <a href="#"><li>Brighton Collection</li></a><br>
        <a href="#"><li>Carpe Group</li></a><br>
        <a href="#"><li>The Lennox</li></a><br>
        <a href="#"><li>South Quarter</li></a><br>
        <a href="#"><li>One Barangaroo</li></a><br>
        <a href="#"><li>One Queensbridge</li></a><br>
        <a href="#"><li>Australia 108</li></a><br>
        <a href="#"><li>Oceans Freshwater</li></a><br>
        <a href="#"><li>The Pavilions</li></a>
</ul>

Answer 1

欢迎来到 stackoverflow，

过滤列表元素的一种方法是将 data-* 属性附加到您的元素，并在 div.nav 中的链接上绑定(bind)一个 javascript 函数以进行过滤列表:

window.addEventListener('DOMContentLoaded', () => {
    // filter list
    const filterList = e => {
        e.preventDefault();
        // fetch filtertype
        const type = e.target.closest('a').getAttribute('data-filter-type');
        // hide or display list elements
        document.querySelectorAll('ul li').forEach(li => {
            li.style.display = type === li.getAttribute('data-filter-type') || type === 'all' ? 'list-item' : 'none';
        });
    };

    // bind links
    document.querySelectorAll('.nav a').forEach(a => {
        a.addEventListener('click', filterList)
    });
});

h1 { font-size: 18px; }

<div class="nav">
    <a href="#" data-filter-type="all"><h1>All</h1></a>
    <a href="#" data-filter-type="residential"><h1><span>Residential</span></h1></a>
    <a href="#" data-filter-type="commercial"><h1><span>Commercial</span></h1></a>
    <a href="#" data-filter-type="retail"><h1><span>Retail</span></h1></a>
</div>

<ul>
    <li data-filter-type="residential"><a href="#">Granville Place</a></li>
    <li data-filter-type="residential"><a href="#">Palisade</a></li>
    <li data-filter-type="commercial"><a href="#">King &amp; Phillip</a></li>
    <li data-filter-type="commercial"><a href="#">Castle Residences</a></li>
    <li data-filter-type="residential"><a href="#">Opera Residences</a></li>
    <li data-filter-type="residential"><a href="#">Brighton Collection</a></li>
    <li data-filter-type="commercial"><a href="#">Carpe Group</a></li>
    <li data-filter-type="retail"><a href="#">The Lennox</a></li>
    <li data-filter-type="retail"><a href="#">South Quarter</a></li>
    <li data-filter-type="residential"><a href="#">One Barangaroo</a></li>
    <li data-filter-type="residential"><a href="#">One Queensbridge</a></li>
    <li data-filter-type="retail"><a href="#">Australia 108</a></li>
    <li data-filter-type="commercial"><a href="#">Oceans Freshwater</a></li>
    <li data-filter-type="commercial"><a href="#">The Pavilions</a>
</ul>