Как получить общую ссылку на скрытый контент, динамически открываемый с помощью JS или JQuery?
Этот вопрос связан с этим сообщением: Реализация боковой панели навигации для загрузки клика по ссылке <div>
В основном я хочу иметь возможность изменять и загружать контент в правой части веб-сайта, щелкая ссылки на боковой панели.
Код ниже был из поста, о котором я упоминал выше.
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type = "text/javascript">
function loadContent(selector){
$("#loadOnClick").html($(selector).html());
};
$(document).ready(function(){
loadContent("#userGuide");
});
</script>
<style>
div.container11 {
width: 100%;
}
section.container1{
display: -webkit-flex; /* Safari */
display: flex;
}
.displayInline{
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: auto;
}
header, footer {
padding: 1em;
color: white;
background-color: powderblue;
clear: left;
text-align: center;
}
nav {
border-right: 2px solid gray;
}
nav ul {
list-style-type: none;
padding-top: 5px;
}
nav ul a {
text-decoration: none;
line-height: 30px;
}
div#loadOnClick {
float: right;
}
.displayOnClick{
display: none;
}
</style>
</head>
<body>
<div class = "container">
<header>
<h1>My Company</h1>
</header>
<section id = "container1">
<nav class = "displayInLine" style = "width: 20%; float: left;">
<ul>
<li><a href = "#userGuide" class = "quickLinks" onclick='loadContent("#userGuide")'>User Guide</a></li>
<li><a href = "#SOP" class = "quickLinks" onclick='loadContent("#SOP")'>SOP</a></li>
<li><a href = "#procedurePages" class = "quickLinks" onclick='loadContent("#procedurePages")'>Procedure pages</a></li>
<li><a href = "#departmentInformation" class = "quickLinks" onclick='loadContent("#departmentInformation")'>Department information</a></li>
<li><a href = "#hoursOfOperations" class = "quickLinks" onclick='loadContent("#hoursOfOperations")'>Hours of operations</a></li>
</ul>
</nav>
<div class = "displayInLine" id = "loadOnClick" style = "width:75%; float: right;">
</div>
</section>
<div id = "userGuide" class = "displayOnClick">
<h1>User Guide</h1>
<p>This is the userguide for employees</p>
</div>
<div id = "SOP" class = "displayOnClick">
<h1>SOP</h1>
<p>This is the Statement of purpose for employees</p>
</div>
<div id = "procedurePages" class = "displayOnClick">
<h1>Procedure pages</h1>
<p>This is the Procedure pages for employees</p>
</div>
<div id = "departmentInformation" class = "displayOnClick">
<h1>Department information</h1>
<p>This is the Department information for employees</p>
</div>
<div id = "hoursOfOperations" class = "displayOnClick">
<h1>Hours of operations</h1>
<p>This is the Hours of operations for employees</p>
</div>
<footer>Copyright © Om Sao</footer>
</div>
</body>
</html>Он делает это хорошо, но единственное, чего не хватает, — это получить ссылку, которой могут поделиться другие. Так, например, если я поделюсь ссылкой docs.html#Overview с другими, они смогут открыть именно ту страницу, которую я указал.
Прямо сейчас, если я даю ссылку на других, содержащих #, она все равно загружается по умолчанию и не переходит на конкретную страницу.
Я планирую использовать его для части документации, поэтому очень важно, чтобы определенной страницей можно было поделиться. Как мне изменить этот сценарий, чтобы справиться с этим?
Спасибо заранее за любую помощь!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Возможный подход,
Получить текущий URL-адрес, используя окно.местоположение.href
разделите URL-адрес и получите строку после #.
При этом вы можете скрыть и показать определенные данные (может быть загружен)
Замените loadContent("#userGuide"); внутри функции готовности документа на loadContent(window.location.href.replace(“docs.html/or your host“,””));
Вам не нужно делать многого, большая часть этого уже встроена в то, как работает HTML.
Ссылки с href = "#something" задают URL страницы как "...#something". Это называется хэш. Он доступен через location.hash в JavaScript. Эти URL-адреса уже есть можно добавить в закладки.
Загрузка страницы с хешем заставит браузер прокручивать элемент с этим идентификатором, а селекторы jQuery/CSS найдут элемент с этим идентификатором, поэтому вы можете использовать href и location.hash элемента непосредственно в коде.
jQuery нужно только обрабатывать переключение видимости элемента, когда хэш изменяется из-за кликов по ссылке. Удобно, что браузер выдает hashchange события всякий раз, когда меняется location.hash.
$(window).on('hashchange', function () {
$('.linkTargets > *:visible').addClass('hidden');
$('.linkTargets ' + location.hash).removeClass('hidden');
});
$(function() {
// trigger the change handler once at page load
if (location.hash) $(window).trigger('hashchange');
$('#simulateLoad').click(function () {
location.hash = '#procedurePages';
$(window).trigger('hashchange');
});
});.hidden {
display: none;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a href = "#userGuide">User Guide</a></li>
<li><a href = "#SOP">SOP</a></li>
<li><a href = "#procedurePages">Procedure pages</a></li>
<li><a href = "#departmentInformation">Department information</a></li>
<li><a href = "#hoursOfOperations">Hours of operations</a></li>
</ul>
<div class = "linkTargets">
<div id = "userGuide" class = "hidden">
<p>This is the userguide for employees</p>
</div>
<div id = "SOP" class = "hidden">
<p>This is the Statement of purpose for employees</p>
</div>
<div id = "procedurePages" class = "hidden">
<p>This is the Procedure pages for employees</p>
</div>
<div id = "departmentInformation" class = "hidden">
<p>This is the Department information for employees</p>
</div>
<div id = "hoursOfOperations" class = "hidden">
<p>This is the Hours of operations for employees</p>
</div>
</div>
<button id = "simulateLoad">Simulate page load for #procedurePages</button>Спасибо, добрый сэр! Я все еще учусь, и я очень внимательно посмотрю, чтобы понять, как вы сделали то, что сделали в этом сценарии. Благодарю вас!
Не пишите встроенные обработчики событий (
onclick = "...")в свой HTML, это уже не 1995 год. Особенно, когда вы используете jQuery, который был сделанный, чтобы обеспечить удобную обработку событий.