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

用户9659025

我有这个链接“ 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”, “我的票”。

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

疑问:我的疑问是如何在大会注册页面 ( http://proj.test/congress/1/congress-test/registration ) 中的用户单击“我的票”时激活“我的票”选项卡

你知道如何实现吗?

用户帐户页面 (proj.test/user/profile?user=1) 中“General info”标签和“My Tickets”标签的链接如下:

<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>注册页面中的链接“ 时,“我的票”不会被激活

马克

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

试试这个:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

选项卡上的Angular-7活动链接不起作用?

来自分类Dev

jQuery tabselect在单击选项卡时不起作用

来自分类Dev

单击事件在选项卡上不起作用

来自分类Dev

jQuery tabselect在单击选项卡时不起作用

来自分类Dev

引导程序选项卡链接不起作用

来自分类Dev

使用PagerSlidingTabStrips单击选项卡时,切换选项卡不起作用

来自分类Dev

使用PagerSlidingTabStrips单击选项卡时,切换选项卡不起作用

来自分类Dev

选项卡的keyCode不起作用

来自分类Dev

Emacs选项卡不起作用

来自分类Dev

jQuery选项卡不起作用

来自分类Dev

jQuery选项卡不起作用

来自分类Dev

引导选项卡不起作用

来自分类Dev

twitter bootstrap 3在js中设置活动选项卡不起作用

来自分类Dev

首次单击时使用Ajax加载的Show Bootstrap选项卡不起作用

来自分类Dev

单击按钮不起作用时,在选项卡中加载新内容

来自分类Dev

首次单击时,使用Ajax加载的Show Bootstrap选项卡不起作用

来自分类Dev

链接在 Facebook 页面自定义选项卡上不起作用

来自分类Dev

链接以更改选项卡图像不再起作用

来自分类Dev

TabLayout和ViewPager-在滑动抽屉项目之间滑动后,选项卡不起作用

来自分类Dev

用户单击时在新选项卡中打开链接

来自分类Dev

更改Android ActionBar选项卡文本样式不起作用

来自分类Dev

单击链接到特定的引导选项卡

来自分类Dev

Delphi-更改活动页面的选项卡颜色,并在单击另一个选项卡后将其重置

来自分类Dev

单击选项卡后,Angular Bootstrap选项卡更改URL

来自分类Dev

python硒phantomJS新选项卡不起作用

来自分类Dev

PyDev:插入空格的选项卡不起作用

来自分类Dev

twitter-bootsrap上的选项卡不起作用

来自分类Dev

QTabWidget:关闭选项卡按钮不起作用

来自分类Dev

jQuery UI选项卡beforeLoad preventDefault不起作用

Related 相关文章

  1. 1

    选项卡上的Angular-7活动链接不起作用?

  2. 2

    jQuery tabselect在单击选项卡时不起作用

  3. 3

    单击事件在选项卡上不起作用

  4. 4

    jQuery tabselect在单击选项卡时不起作用

  5. 5

    引导程序选项卡链接不起作用

  6. 6

    使用PagerSlidingTabStrips单击选项卡时,切换选项卡不起作用

  7. 7

    使用PagerSlidingTabStrips单击选项卡时,切换选项卡不起作用

  8. 8

    选项卡的keyCode不起作用

  9. 9

    Emacs选项卡不起作用

  10. 10

    jQuery选项卡不起作用

  11. 11

    jQuery选项卡不起作用

  12. 12

    引导选项卡不起作用

  13. 13

    twitter bootstrap 3在js中设置活动选项卡不起作用

  14. 14

    首次单击时使用Ajax加载的Show Bootstrap选项卡不起作用

  15. 15

    单击按钮不起作用时,在选项卡中加载新内容

  16. 16

    首次单击时,使用Ajax加载的Show Bootstrap选项卡不起作用

  17. 17

    链接在 Facebook 页面自定义选项卡上不起作用

  18. 18

    链接以更改选项卡图像不再起作用

  19. 19

    TabLayout和ViewPager-在滑动抽屉项目之间滑动后,选项卡不起作用

  20. 20

    用户单击时在新选项卡中打开链接

  21. 21

    更改Android ActionBar选项卡文本样式不起作用

  22. 22

    单击链接到特定的引导选项卡

  23. 23

    Delphi-更改活动页面的选项卡颜色,并在单击另一个选项卡后将其重置

  24. 24

    单击选项卡后,Angular Bootstrap选项卡更改URL

  25. 25

    python硒phantomJS新选项卡不起作用

  26. 26

    PyDev:插入空格的选项卡不起作用

  27. 27

    twitter-bootsrap上的选项卡不起作用

  28. 28

    QTabWidget:关闭选项卡按钮不起作用

  29. 29

    jQuery UI选项卡beforeLoad preventDefault不起作用

热门标签

归档