Question

我在＆＃34; #registration_form_list＆＃34;中有一些列表项。名单。默认的活动列表项是ID为＃34;＃generalInfo＆＃34;的列表项。但我希望当一个网址像这个＆＃34; http://proj.test/user/profile?user=1#myTickets＆＃34;访问保持活动的选项卡是＆＃34;我的门票＆＃34;标签。

所以我想根据当前网址激活标签。但它不适用于下面的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');
            }
        });

例如，我有一种方法，用户被重定向到＆＃34; http://proj.test/user/profile?user=1#myTickets＆＃34;但保持活动的标签是＆＃34;＃generalInfo＆＃34;当用户访问页面时。

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');
});

在这种情况下，您可以确定如果网址中包含错误的哈希值，则#generalInfo链接将设置为活动状态，而在其他情况下，正确的链接将始终处于活动状态。

您可以直接从Location获取hash值。

Answer 2

this.href会返回您网址的完整路径。

#generalInfo等于http://proj.test/user/profile?user=1#generalInfo，因此永远不会等于path

如果您希望网址与锚标记的href值有条件，则需要缩减//This will always assume you're only using 1 pound sign var path = window.location.href.split("#")[1];

path

这样，generalInfo = if(hash === path){}（假设您已经http://proj.test/user/profile?user=1#generalInfo）

然后你需要让自己的条件为if (this.href === path)（不是#generalInfo，因为this.href等于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

（作为旁注，我想做的是在这种情况下删除所有锚链接的{{1}}类，然后再向特定的一个添加新的<} / p>

根据当前网址激活标签

2 个答案: