javascript - 我如何积极地为 bootstrap nav-pills 工作

Question

我将 bootsrap4 与 shopify 一起使用。我想按标签过滤博客页面上的文章。我使用nav-pills并希望nav-link在相应的 url 上处于活动状态。

使用此代码active类将不会通过。当我添加data-toggle="pill" active时将通过，但链接不再起作用，并且不可能转到另一个网址。

<div class="container">
    <div class="row justify-content-center mb-4">
        <ul class="nav nav-pills nav-scroll nav-blog px-4">
        {% for tag in blog.all_tags %}
        {% if forloop.first == true %}
            <li class="nav-item">
                <a class="nav-link active pb-1 w-100" href="/blogs/{{ blog.handle }}">All</a>
            </li>
        {% else %}
            <li class="nav-item">
                <a class="nav-link pb-1 w-100" href="/blogs/{{ blog.handle }}/tagged/{{ tag }}">{{ tag }}</a>
            </li>
        {% endif %}
        {% endfor %}
        </ul>
    </div>
</div>

标签： javascripthtmlbootstrap-4shopify