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

Question

我有一个链接"http://proj.test/congress/1/congress-test/registration“，在这里，用户有一个表单可以在国会注册。这是一个muli步骤表单，在步骤2中有一条消息通知用户他已在success.In注册--这条消息有一个链接"My票证“：

 <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”、"My票证“。

默认选项卡是"General“，这是用来更新某些用户一般信息的选项卡。

怀疑:当用户在国会注册页面(http://proj.test/congress/1/congress-test/registration)点击“我的票证”时，如何打开“我的票”选项卡。

你知道如何做到这一点吗？

指向uer帐户页(proj.test/user/profile?user=1)的选项卡"General info“和选项卡"My票证”的链接如下：

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