我有这个链接“ 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] 删除。
我来说两句