为每个不同的选项卡更改 URL

Question

我有 6 个选项卡部分，每个部分都像我在刷新页面后单击选项卡按钮时一样工作，所有选项卡 url 工作正常，但单击选项卡按钮后 url 功能不起作用在职的。使用下面 javascript 后，我的页面横幅消失了。请检查并提供帮助。

<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

检查你的控制台，你会看到你的错误
Error: Syntax error, unrecognized expression: a[href=#demo2]
这意味着您缺少 "
变化：$('a[href=' + anchor + ']').tab('show');
收件人：$('a[href="' + anchor + '"]').tab('show');
并在您正在寻找具有给定属性.

的元素的任何地方更改它

$(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>

为每个不同的选项卡更改 URL

Change URL for every different Tab

html

javascript

url

tabs