根據當前網址激活標簽

Question

我在“#registration_form_list”列表中有一些列表項。 默認活動列表項是ID為“#generalInfo”的列表項。 但我希望當訪問這樣的URL“ http：//proj.test/user/profile？user = 1 #myTickets ”時，保持活動狀態的選項卡是“我的票證”選項卡。

所以我想根據當前的網址激活標簽。 但它不適用於下面的jQuery。

你知道為什么嗎？

HTML：

<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
    <li class="">
        <a class="nav-link active" href="#generalInfo" data-toggle="tab" role="tab">
            <i class="fa fa-user" aria-hidden="true"></i> <span class="d-none d-lg-inline-block">General Info</span></a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#myTickets" data-toggle="tab" role="tab">
            <i class="fa fa-calendar" aria-hidden="true"></i> <span
                    class="d-none d-lg-inline-block">My Tickets</span></a>
    </li>
    <!-- more list items -->
</ul>

jQuery的：

   var path = window.location.href;

        $('.registration_form_list a').each(function () {
            var hash = $(this).attr('href').split('#')[1];
            //alert(hash); appaers
            if (this.href === path) {
                // alert('test'); dont appears
                $('.registration_form_list a').removeClass('active');
                $('a[href="#'+hash+'"]').addClass('active');
            }
        });

例如，我有一個方法，用戶被重定向到“ http：//proj.test/user/profile？user = 1 #myTickets”，但當用戶訪問頁面時，保持活動的選項卡是“#generalInfo” 。

return redirect(route('user.index', ['user' => Auth::id()]).'#myTickets');

標簽內容位於標簽內容中，其對應的ID如下：

<div class="tab-content registration_body bg-white" id="myTabContent">

    <div class="tab-pane fade show active clearfix" id="generalInfo" role="tabpanel" aria-labelledby="home-tab">
    <!-- #generalInfo content -->
    </div>

    <div class="tab-pane clearfix fade" id="myTickets" role="tabpanel" aria-labelledby="contact-tab">
        <!-- #myTickets content -->
    </div>
    <!-- other tabs -->
</div>

Answer 1

試試這個

$(document).ready(function() {
  // Obtain hash value from the url
  var hash = window.location.hash;
  // Try to find a nav-link with the hash
  var hashNavLink = $('.nav-link[href="'+hash+'"]');

  // If there is no link with the hash, take default link
  if (hashNavLink.length === 0) {
    hashNavLink = $('.nav-link[href="#generalInfo"]');
  }

  hashNavLink.addClass('active');
});

在這種情況下，您可以確定如果URL中存在錯誤的哈希，則#generalInfo鏈接將被設置為活動，而在其他情況下，正確的鏈接將始終處於活動狀態。

您可以直接從Location獲取hash值。

Answer 2

var path = window.location.href; 返回您網址的完整路徑。

this.href等於#generalInfo所以它永遠不會等於http://proj.test/user/profile?user=1#generalInfo

如果您希望在URL與錨標記的href值之間存在條件，則需要減少path

//This will always assume you're only using 1 pound sign    
var path = window.location.href.split("#")[1];

這樣， path = generalInfo （假設你在http：//proj.test/user/profile？user = 1＃generalInfo ）

那么你需要創建條件if(hash === path){} （不是if (this.href === path)因為this.href等於#generalInfo而不僅僅是generalInfo

所以現在它將尋找generalInfo === generalInfo

整個代碼是：

 var path = window.location.href.split('#')[1]; //equals the hash

    $('.registration_form_list a').each(function () {
        var hash = $(this).attr('href').split('#')[1];
        //alert(hash); appaers
        if (hash === path) {
            // alert('test'); dont appears
            $('.registration_form_list a').removeClass('active');
            $('a[href="#'+hash+'"]').addClass('active');
        }
    });

（作為旁注，我喜歡做的是在這種情況下從所有錨鏈接中刪除active類，然后再向特定的鏈接添加新鏈接）