用户单击特定链接后更改活动选项卡不起作用

Question

我有这个链接“http://proj.test/congress/1/congress-test/registration”，用户有一个表格可以在大会中注册。它是一个多步骤表单，在步骤 2 中有一条消息通知用户他已成功注册。在此消息中有一个链接“我的门票”：

 <a href="{{route('user.index', ['user' => Auth::id()])#myTickets}}"My Tickes</a>

链接路线：

Route::get('/user/profile', [
    'uses' => 'UserController@index',
    'as'   =>'user.index'
]);

当用户点击“我的票”时，他会转到“proj.test/user/profile?user=1”，这是编辑一些用户帐户设置的页面。在这个页面中有一些标签，如“常规”信息”、“我的门票”。

默认选项卡是“General Info”，即更新一些用户基本信息的选项卡。

疑问：我的疑问是，当大会注册页面 (http://proj.test/congress/1/congress-test/registration) 中的用户点击“我的门票”时，如何激活“我的门票”标签。

你知道如何实现吗？

到 uer 帐户页面 (proj.test/user/profile?user=1) 中的“常规信息”选项卡和“我的工单”选项卡的链接如下：

<ul class="nav nav-pills bg-light-gray account_options" 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">>MyTickets</span></a>
</li>
...
</ul>

然后标签如下：

<div class="tab-content  bg-white" id="myTabContent">
    <div class="tab-pane fade show active clearfix" id="generalInfo" role="tabpanel" aria-labelledby="home-tab">
        <form method="post" action="{{route('user.updateGeneralInfo')}}" class="clearfix">
        {{csrf_field()}}
        ...
        </form>
    </div>

    <div class="tab-pane clearfix fade" id="myTickets" role="tabpanel" aria-labelledby="contact-tab">
    ...
    </div>
</div>

我正在尝试使用 jQuery，例如：

var path = window.location.href;
    alert(path);
    $('.account_options a').each(function () {
        if (this.href === path) {
            $('a[href="#' + path + '"]').addClass('active');
        }
    });

但它不起作用。

当用户点击注册页面中的链接“<a href="{{route('user.index', ['user' => Auth::id()])#myTickets}}"My Tickes</a>”时，“我的门票”不会激活。

Answer 1

您还需要删除切换时不活动的选项卡上的“活动”类。

试试这个：

  var targetId = '#' + $(this).data('target');

  if ($(this).href === path) {
      $(this).addClass('active');

      $(targetId).show();
  } else {
      $(this).removeClass('active');

      $(targetId).hide();
  }

另一个选项是不使用 url 而只是一个事件监听器。示例：

 $(document).on('click', '.account_options a', function (event) {
        $('.account_options a').each(function () {
            var targetId = '#' + $(this).data('target');

            $(this).removeClass('active');

            $(targetId).hide();
        });

        var targetId = '#' + $(this).data('target');

        $(this).addClass('active');

        $(targetId).show();
    });