Ссылка на вкладку из URL
У меня есть код с тремя вкладками страниц, одновременно отображается только одна, с активным маркером, однако я не могу понять, как я могу напрямую ссылаться на URL-адрес.
https://jsfiddle.net/c51xvekh/
Мой текущий html:
function openTabs(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("city");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).style.display = "block";
document.getElementById(tabName + "-tab").classList.add("active");
}
document.getElementById("sunbed-tab").click();<div class = "breadcrumb-wrap">
<ul class = "breadcrumb">
<li><a class = "tablinks" id = "sunbed-tab" onclick = "openTabs(event, 'sunbed')">Sunbed<br>Packages</a></li>
<li><a class = "tablinks" id = "trainer-tab" onclick = "openTabs(event, 'trainer')">Personal<br>Trainers</a></li>
<li><a class = "tablinks" id = "sauna-tab" onclick = "openTabs(event, 'sauna')">Sauna<br>Rooms</a></li>
</ul>
</div>
<div id = "sunbed" class = "city">
This is sunbed page
</div>
<div id = "trainer" class = "city">
This is trainer page
</div>
<div id = "sauna" class = "city">
This is sauna page
</div>например, если я захожу на url.com/page#sauna, открывается страница с открытым разделом сауны, а также для тренеров, если посещается /page#trainer.
Есть ли что-то в JS, что может это сделать?
я только что попробовал
if (window.location.hash.substring(1)=='trainer') {
document.getElementById("trainer-tab").click();
} elseif (window.location.hash.substring(1)=='sauna') {
document.getElementById("sauna-tab").click();
} else {
document.getElementById("sunbed-tab").click();
}
но, похоже, он терпит неудачу с неожиданным токеном.
(Я php-разработчик и недавно изучаю js)
Я пытался запустить :target в CSS и установить для него display: block, но это не сработало.
Любые идеи, пожалуйста?
Похоже, вы можете просто получить хэш из URL-адреса (Как вы можете проверить наличие #хэша в URL-адресе с помощью JavaScript?), а затем вызвать свою функцию openTabs с этим значением при загрузке страницы?
elseif должно быть else if в этом фрагменте вашего комментария. И вместо того, чтобы имитировать щелчок, было бы проще просто вызвать openTabs(null, hashValue) (поскольку параметр evt, похоже, не используется, его можно удалить или передать как null)
@DBS - спасибо за это! Мне удалось заставить его работать сейчас, однако происходит странное перенаправление. Поэтому, если я захожу на mysite.com/mypage#sauna, он фактически перенаправляет на совершенно другую страницу. Я предполагаю, что есть что-то в постоянных ссылках или htaccess, что связано с хэшем. Я гуглил и искал здесь, чтобы попытаться найти способ разрешить обычный URL-адрес с хешем, но я не могу найти ответ, чтобы моя страница отображалась правильно. Знаете ли вы, что мне нужно посмотреть, чтобы URL-адрес страницы включал хэш?
@DBS Я создаю сайт WordPress, и похоже, что URL-адрес будет domain.com/other-services/#trainer/ (обратите внимание на / между страницей и #). Есть ли способ получить мой код для прочитайте # после / я использую ``` if (window.location.hash.substring(1)=='trainer') { ```
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Можно использовать #hash или QueryParams. Я прикрепил пример, используя оба
//USING #HASH
let hashString = location.hash ? location.hash.substring(1) : "";
if (hashString) {
openTabs(null, hashString);
}
//USING ?QUERY=PARAM
let queryParams = new URLSearchParams(location.search);
if (queryParams.get('tab')) {
openTabs(null, queryParams.get('tab'));
}
Вы можете попробовать получить URL-адрес, разделив хэш:
const location = window.location.href.split("#")[1];
Затем установите для класса города значение display:none и добавьте город-солярий и т. д. Вы должны проверить, содержат ли элементы этот класс, например:
const tabsHandler = document.querySelectorAll('.city');
tabsHandler.forEach((element)=>{
element.classList.contains(`city--${location}`) ? element.classList.add('show-block') : '';
});
Мне удалось заставить его работать, используя этот код
if (window.location.hash.substring(1)=='trainer') {
document.getElementById("trainer-tab").click();
} else if (window.location.hash.substring(1)=='sauna') {
document.getElementById("sauna-tab").click();
} else {
document.getElementById("sunbed-tab").click();
}
Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.