根据当前的URL将标签置为活动状态

Question

我有一些列表项在“＃registration_form_list”列表中。默认的活动列表项是具有ID“＃generalInfo”的列表项。但当访问像这样的网址时，"http://proj.test/user/profile?user=1#myTickets"，我想让保持活跃的选项卡是“My Tickets”选项卡。

因此，我想根据当前URL激活选项卡。但下面的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的tab-content中，如下所示：

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

- user9659025

---

这是完整的JavaScript代码吗？代码是否在.ready()处理程序中？ - mpallansch

谢谢，是的。警告（hash）出现了，但是像“if（this.href === path）{alert（'test'）;...}”这样的“if”语句内部的警告没有出现。 - user9659025

你传递到 this.href 中的是什么值？ - paudel

如果您将 this.href === path 更换为 hash === window.location.hash.replace('#', '')，第二个提示会触发吗？ - mpallansch

@joW 你可能想要看一下这个更通用的解决方案 https://dev59.com/W2ct5IYBdhLWcg3wZMfn - Bart

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值。

- Revinand

---

如果他使用这段代码，他需要从HTML中删除#generalInfo链接上的active类，否则多个链接可能会有活动类。除此之外，这是一个很好的答案。 - mpallansch

谢谢，但是有一个问题。当用户被重定向到“proj.test/user/profile?user=1#myTickets”时，“我的票务”选项卡仍然处于活动状态，但是“我的票务”选项卡的内容并没有出现。仍然显示“＃generalInfo”的选项卡内容。 - user9659025

在hashNavLink.addClass('active');之后添加hashNavLink.tab('show')。这样做应该会有帮助。 - Revinand

Answer 2

var path = window.location.href; 返回你的URL的完整路径。

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类移除，然后再为特定的链接添加新的active类）

- ntgCleaner

---

谢谢，但是有一个问题。当用户被重定向到“proj.test/user/profile?user=1#myTickets”时，“我的票务”选项卡仍然处于活动状态，但是“我的票务”选项卡的内容没有出现。仍然显示“＃generalInfo”的选项卡内容。 - user9659025

@johnW 根据你的评论，你可能需要更新你的问题或者重新提一个新的问题。当回答时读到的问题是在问如何使 tab 处于激活状态。我们得看看你的 HTML 才能确定实际内容的位置并展示它。 - ntgCleaner