单击链接会添加到URL但不起作用

Question

我正在使用引导标签来执行我的功能。当我单击选项卡时，它会添加到URL，但更改不会应用于页面。当我在新标签页中打开链接时，会应用更改。

我正在使用的javascript代码：

$(function() {
              $( 'ul.nav li' ).on( 'click', function() {
                    $( this ).parent().find( 'li.active' ).removeClass( 'active' );
                    $( this ).addClass( 'active' );
              });

        });  

        $(document).ready(function() {
          /* Automagically jump on good tab based on anchor; for page reloads or links */
          if(location.hash) {
            $('a[href=' + location.hash + ']').tab('show');
          }

          $(document.body).on("click", "a[data-toggle]", function(event) {
            location.hash = this.getAttribute("href");
          });
        });

        $(window).on('popstate', function() {
          var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
          $('a[href=' + anchor + ']').tab('show');
        });

第一部分是根据打开的选项卡更改活动类。剩下的就是打开标签。

我使用的HTML代码如下：

                <div class="hr-divider m-y-md">
                  <ul class="nav nav-pills hr-divider-content hr-divider-nav" role="tablist" id="mynav">
                    <li class="active" role="presentation">
                      <a href="#weekly_exp" role="tab" data-toggle="tab" aria-controls="weekly_exp">Weekly</a>
                    </li>
                    <li role="presentation">
                      <a href="#monthly_exp" role="tab" data-toggle="tab" aria-controls="monthly_exp" >Monthly</a>
                    </li>
                    <li role="presentation">
                      <a href="#yearly_exp" role="tab" data-toggle="tab" aria-controls="yearly_exp" >Yearly</a>
                    </li>
                  </ul>
                </div>

                <div class="tab-content">

                      <div role="tabpanel" class="tab-pane active" id="weekly_exp" name="weekly_exp">
                          <div id="pieWeek"></div>
                      </div>

                      <div role="tabpanel" class="tab-pane" id="monthly_exp" name="monthly_exp">
                            <div id="pieMonth"></div>
                      </div>

                      <div role="tabpanel" class="tab-pane" id="yearly_exp" name="yearly_exp">
                            <div id="pieYear"></div>
                      </div>

                </div>
            </div>

希望尽快得到合适的答案。先谢谢你们。