更改每个不同标签的 URL

Question

I have 6 tabs sections, each section is working like when I click on tabs button after refresh the page all tabs url is working fine but after clicking the tabs button the url function not working. After using the below javascript my page banner is disappearing. please check and help.

 <script> $(function() { // jump to tab if it exists if (location.hash) { $('a[href=' + location.hash + ']').tab('show'); } // add tab hash to url to persist state $(document.body).on("shown.bs.tab", function(e){ location.hash = e.target.hash; }); }); /* on history back activate the tab of the location hash if exists or the default tab if no hash exists */ $(window).on('popstate', function() { var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href"); $('a[href=' + anchor + ']').tab('show'); }); </script>

 <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#demo1" aria-controls="about" role="tab" data-toggle="tab"><i class="fa fa-user" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo2" aria-controls="syllabus" role="tab" data-toggle="tab"><i class="fa fa-book" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo3" aria-controls="exam-pattern" role="tab" data-toggle="tab"><i class="fa fa-file-text-o" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo4" aria-controls="instructions" role="tab" data-toggle="tab"><i class="fa fa-info-circle" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo5" aria-controls="mock-test" role="tab" data-toggle="tab"><i class="fa fa-file-text-o" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo6" aria-controls="updates" role="tab" data-toggle="tab"><i class="fa fa-refresh" aria-hidden="true"></i>Demo</a></li> </ul> <div role="tabpanel" class="tab-pane fade" id="demo1"> <p>Dummy Text</p> </div> <div role="tabpanel" class="tab-pane fade" id="demo2"> <p>Dummy Text</p> </div> .......................

Answer 1

Check your console and you will see your error
Error: Syntax error, unrecognized expression: a[href=#demo2]
That mean that you are missing "
Change: $('a[href=' + anchor + ']').tab('show');
To: $('a[href="' + anchor + '"]').tab('show');
And change it everywhere where your are looking for element with given property.

 $(function () { // jump to tab if it exists if (location.hash) { $('a[href="' + location.hash + '"]').tab('show'); } // add tab hash to url to persist state $(document.body).on("shown.bs.tab", function (e) { location.hash = e.target.hash; }); }); /* on history back activate the tab of the location hash if exists or the default tab if no hash exists */ $(window).on('popstate', function () { var anchor = location.hash || $('a[data-toggle="tab"]').first().attr("href"); $('a[href="' + anchor + '"]').tab('show'); });

 <!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#demo1" aria-controls="about" role="tab" data-toggle="tab"><i class="fa fa-user" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo2" aria-controls="syllabus" role="tab" data-toggle="tab"><i class="fa fa-book" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo3" aria-controls="exam-pattern" role="tab" data-toggle="tab"><i class="fa fa-file-text-o" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo4" aria-controls="instructions" role="tab" data-toggle="tab"><i class="fa fa-info-circle" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo5" aria-controls="mock-test" role="tab" data-toggle="tab"><i class="fa fa-file-text-o" aria-hidden="true"></i>Demo</a></li> <li role="presentation"><a href="#demo6" aria-controls="updates" role="tab" data-toggle="tab"><i class="fa fa-refresh" aria-hidden="true"></i>Demo</a></li> </ul> <div role="tabpanel" class="tab-pane fade" id="demo1"> <p>Dummy Text</p> </div> <div role="tabpanel" class="tab-pane fade" id="demo2"> <p>Dummy Text</p> </div>