Активировать вкладку на основе текущего URL
У меня есть элементы списка в списке "#registration_form_list". Активным элементом списка по умолчанию является элемент списка с идентификатором "#generalInfo". Но я хочу этого, когда URL-адрес вроде к этому «http: //proj.test/user/profile? user = 1 # myTickets» осуществляется доступ, вкладка, которая остается активной, является вкладкой «Мои билеты».
Поэтому я хочу активировать вкладку на основе текущего URL-адреса. Но он не работает с jQuery ниже.
Ты знаешь почему?
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:
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');
}
});
Например, у меня есть метод, в котором пользователь перенаправляется на «http: //proj.test/user/profile? user = 1 # myTickets», но активна вкладка «#generalInfo», когда пользователь обращается к странице.
return redirect(route('user.index', ['user' => Auth::id()]).'#myTickets');
Содержимое вкладок находится внутри содержимого вкладок с соответствующим идентификатором, например:
<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>
Спасибо, да. Предупреждение (хеш); появляется, но внутри "if (this.href === path)" появляется предупреждение, например: "if (this.href === path) {alert ('test'); ..." не появляется.
какое значение вы передаете в this.href ??
Если вы переключите this.href === path на hash === window.location.hash.replace('#', ''), срабатывает ли второе предупреждение?
@joW, возможно, вы захотите взглянуть на это более общее решение stackoverflow.com/questions/12131273/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуй это
$(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');
});
В этом случае вы можете быть уверены, что если в URL-адресе указан неправильный хеш, ссылка #generalInfo будет установлена как активная, а в других случаях правильная ссылка будет всегда активной.
Вы можете получить значение hash непосредственно из Место расположения.
Если бы он использовал этот код, ему пришлось бы удалить класс active из ссылки #generalInfo в HTML, иначе несколько ссылок могли бы иметь активный класс. В противном случае это хороший ответ.
Спасибо, но есть проблема. Когда пользователь перенаправляется на «proj.test / user / profile? User = 1 # myTickets»; вкладка «Мои билеты» остается активной, но содержимое вкладки «Мои билеты» не отображается. По-прежнему отображается содержимое вкладки "#generalInfo"
Просто добавьте hashNavLink.tab('show') после hashNavLink.addClass('active'); Это должно помочь
var path = window.location.href; возвращает полный путь вашего URL.
this.href равен #generalInfo, поэтому он никогда не будет равен http://proj.test/user/profile?user=1#generalInfo
Если вы хотите, чтобы URL-адрес соответствовал значению href вашего тега привязки, вам нужно сократить свой path.
//This will always assume you're only using 1 pound sign
var path = window.location.href.split("#")[1];
Таким образом, path = generalInfo (при условии, что вы находитесь на http: //proj.test/user/profile? user = 1 # generalInfo)
Затем вам нужно сделать ваше условие if (hash === path){} (не if (this.href === path), потому что this.href равен #generalInfo, а не только generalInfo.
Так бы сейчас искал generalInfo === generalInfo
Весь код будет:
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');
}
});
(в качестве побочного примечания, что-то, что мне нравится делать, это удалять класс active из якорных ссылок все в этой ситуации, прежде чем вы добавляете новый к конкретному)
Спасибо, но есть проблема. Когда пользователь перенаправляется на «proj.test / user / profile? User = 1 # myTickets»; вкладка «Мои билеты» остается активной, но содержимое вкладки «Мои билеты» не отображается. По-прежнему отображается содержимое вкладки "#generalInfo"
@johnW Основываясь на вашем комментарии, вам может потребоваться либо обновить свой вопрос, либо начать новый. Вопрос, прочитанный при ответе, спрашивал, как сделать вкладка активным. Нам нужно будет увидеть ваш HTML-код, чтобы узнать, где на самом деле должно быть показано, что
Это полный код JavaScript? Код находится в обработчике
.ready()?