0
<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>

my Question is while clicking the href of card h-100 class it navigating to view the product page but how to keep the status active for the corresponding list-group items?

For example,

http://127.0.0.1:5000/shoes-->In this shoes group-item is active but if I go to http://127.0.0.1:5000/shoes?view=2-->the active status is not retained...

How to retained the status throughout the sublinks of \shoes(..)

Yash
  • 25
  • 6

1 Answers1

0

You have to save active tab status in storage/cookies. After page refresh select that tab again using jQuery.

Follow this thread to understand in detail approach. Keep selected tab on page refresh

Wajid
  • 26
  • 1
  • 1
  • 8