Question

我有这个链接“http://proj.test/congress/1/congress-test/registration”，其中用户有一个表格在国会注册。它是一个muli步骤形式，在步骤2中有一条消息通知用户他已注册成功。在此消息中有一个链接“My Tickets”：

 <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）中的用户点击“我的门票”时，如何激活“我的门票”标签。

你知道如何实现这个目标吗？

指向“常规信息”标签的链接以及用户帐户页面（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

您还需要删除“有效”状态＆＃39;切换时未激活的选项卡上的类。

尝试这样的事情：

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

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

1 个答案: