如何在导航的子链接中保持列表组项目的活动状态？答案

【问题标题】：How to keep active status in list-group items throughout the sublinks of Nav?如何在导航的子链接中保持列表组项目的活动状态？
【发布时间】：2021-03-30 07:04:12
【问题描述】：

<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这鞋组-item是活跃的，但是如果我去http://127.0.0.1:5000/shoes?view=2-->the活跃状态不会保留...

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

【问题讨论】：

标签： html bootstrap-4

【解决方案1】：

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

关注此线程以了解详细方法。 Keep selected tab on page refresh

【讨论】：