[英]Turn the tab active based on the current url
I have some list items in the "#registration_form_list" list. 我在“#registration_form_list”列表中有一些列表项。 The default active list item is the list item with id "#generalInfo". 默认活动列表项是ID为“#generalInfo”的列表项。 But I want that when a url like this " http://proj.test/user/profile?user=1#myTickets " is accessed the tab that stays active is the "My Tickets" tab. 但我希望当访问这样的URL“ http://proj.test/user/profile?user = 1 #myTickets ”时,保持活动状态的选项卡是“我的票证”选项卡。
So I want to turn the tab active based on the current url. 所以我想根据当前的网址激活标签。 But its not working with the jQuery below. 但它不适用于下面的jQuery。
Do you know why? 你知道为什么吗?
Html: HTML:
<ul class="nav nav-pills bg-light-gray registration_form_list" 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">
<i class="fa fa-calendar" aria-hidden="true"></i> <span
class="d-none d-lg-inline-block">My Tickets</span></a>
</li>
<!-- more list items -->
</ul>
jQuery: jQuery的:
var path = window.location.href;
$('.registration_form_list a').each(function () {
var hash = $(this).attr('href').split('#')[1];
//alert(hash); appaers
if (this.href === path) {
// alert('test'); dont appears
$('.registration_form_list a').removeClass('active');
$('a[href="#'+hash+'"]').addClass('active');
}
});
For example I have a method where the user is redirected to the " http://proj.test/user/profile?user=1#myTickets " but the tab that remains active is the "#generalInfo" when the user accesses the page. 例如,我有一个方法,用户被重定向到“ http://proj.test/user/profile?user = 1 #myTickets”,但当用户访问页面时,保持活动的选项卡是“#generalInfo” 。
return redirect(route('user.index', ['user' => Auth::id()]).'#myTickets');
The tabs content are inside tab-content with the corresponding id like: 标签内容位于标签内容中,其对应的ID如下:
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="generalInfo" role="tabpanel" aria-labelledby="home-tab">
<!-- #generalInfo content -->
</div>
<div class="tab-pane clearfix fade" id="myTickets" role="tabpanel" aria-labelledby="contact-tab">
<!-- #myTickets content -->
</div>
<!-- other tabs -->
</div>
Try this 试试这个
$(document).ready(function() {
// Obtain hash value from the url
var hash = window.location.hash;
// Try to find a nav-link with the hash
var hashNavLink = $('.nav-link[href="'+hash+'"]');
// If there is no link with the hash, take default link
if (hashNavLink.length === 0) {
hashNavLink = $('.nav-link[href="#generalInfo"]');
}
hashNavLink.addClass('active');
});
In this case you can be sure that if a wrong hash is in the url, the #generalInfo
link will be set as active and in other cases the correct link will be always active. 在这种情况下,您可以确定如果URL中存在错误的哈希,则#generalInfo
链接将被设置为活动,而在其他情况下,正确的链接将始终处于活动状态。
You can obtain hash
value directly from Location . 您可以直接从Location获取hash
值。
var path = window.location.href;
returns the entire path of your URL. 返回您网址的完整路径。
this.href
is equaling #generalInfo
so it will never equal http://proj.test/user/profile?user=1#generalInfo
this.href
等于#generalInfo
所以它永远不会等于http://proj.test/user/profile?user=1#generalInfo
If you want to have a condition on the URL vs the href value of your anchor tag, you need to cut down your path
如果您希望在URL与锚标记的href值之间存在条件,则需要减少path
//This will always assume you're only using 1 pound sign
var path = window.location.href.split("#")[1];
This way, path
= generalInfo
(assuming you're on http://proj.test/user/profile?user=1#generalInfo ) 这样, path
= generalInfo
(假设你在http://proj.test/user/profile?user = 1#generalInfo )
Then you need to make your condition if(hash === path){}
(not if (this.href === path)
because this.href is equal to #generalInfo
and not just generalInfo
那么你需要创建条件if(hash === path){}
(不是if (this.href === path)
因为this.href等于#generalInfo
而不仅仅是generalInfo
So it would now be looking for generalInfo === generalInfo
所以现在它将寻找generalInfo === generalInfo
Whole code would be: 整个代码是:
var path = window.location.href.split('#')[1]; //equals the hash
$('.registration_form_list a').each(function () {
var hash = $(this).attr('href').split('#')[1];
//alert(hash); appaers
if (hash === path) {
// alert('test'); dont appears
$('.registration_form_list a').removeClass('active');
$('a[href="#'+hash+'"]').addClass('active');
}
});
(as a side note, something I like to do is remove the active
class off of all anchor links in this situation before you add a new one to the specific one) (作为旁注,我喜欢做的是在这种情况下从所有锚链接中删除active
类,然后再向特定的链接添加新链接)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.