如何在整个 Nav 子链接的列表组项目中保持活动状态？

问题描述

<div class="list-group">
            <a href="/tshirt" class="list-group-item">tshirt</a>
            <a href="/wallet" class="list-group-item">wallet</a>
            <a href="/belt" class="list-group-item">belt</a>
            <a href="/shoes" class="list-group-item active">shoes</a>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-4">
                <div class="card h-100">
                    <a href="/shoes?view={{product.id}}">
                        <div class="card-img-top"  style="background:url('static/image/product/{{product.category}}/{{product.picture}}');>
                </div>
                    </a>
 </div>

我的问题是在单击卡片 h-100 类的 href 时，它会导航以查看产品页面，但如何查看保持相应列表组项目的状态为活动状态？

例如

http://127.0.0.1:5000/shoes-->In 这个鞋子组项目是活跃的，但如果我去 http://127.0.0.1:5000/shoes?view=2-->the 活跃状态不保留...

如何在 \shoes(..) 的整个子链接中保留状态

解决方法

您必须将活动标签状态保存在存储/cookies 中。页面刷新后，再次使用 jQuery 选择该选项卡。

按照此线程了解详细方法。 Keep selected tab on page refresh

bootstrap-4 html