Изменение активной вкладки после того, как пользователь не щелкнул по определенной ссылке, не работает

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 », на которой можно редактировать некоторые настройки учетной записи пользователя. На этой странице есть несколько вкладок типа« Общие ». Инфо "," Мои билеты ".

По умолчанию используется вкладка «Общая информация», то есть вкладка для обновления некоторой общей информации пользователя.

Сомнение: Я сомневаюсь, как включить вкладку «Мои билеты», когда пользователь на странице регистрации в конгрессе (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();
    });