如何为通过JS或jQuery动态加载的隐藏内容生成可分享链接

我来帮你搞定这个锚点分享的问题！你的现有代码已经实现了侧边栏切换内容的功能，但确实没处理URL锚点的读取和更新，只需要对JavaScript部分做几处调整就能解决。

修改后的完整代码 #

<!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());
  // 更新URL锚点，让分享链接带对应标识
  window.location.hash = selector.replace('#', '');
};

$(document).ready(function(){
  // 页面加载时读取URL中的锚点
  var targetHash = window.location.hash;
  // 有有效锚点则加载对应内容，否则加载默认的用户指南
  if(targetHash && $(targetHash).length > 0){
    loadContent(targetHash);
  } else {
    loadContent("#userGuide");
  }

  // 监听锚点变化（手动改URL、浏览器前进后退时自动切换内容）
  $(window).on('hashchange', function(){
    var newHash = window.location.hash;
    if(newHash && $(newHash).length > 0){
      loadContent(newHash);
    }
  });
});
</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 &copy; Om Sao</footer>
</div>
</body>
</html>

关键修改说明 #

• 页面加载读取锚点：在页面初始化时，获取URL中#后的锚点值，如果该锚点对应内容容器存在，就加载它；否则加载默认的用户指南。
• 点击链接更新锚点：在loadContent函数中添加锚点更新逻辑，点击侧边栏链接时，URL会自动带上对应锚点，方便直接分享。
• 监听锚点变化：添加hashchange事件监听，当用户手动修改URL锚点、或使用浏览器前进/后退按钮时，页面会自动切换到对应内容，提升使用体验。

这样修改后，你分享类似docs.html#SOP的链接给他人，对方打开后就会直接显示SOP的内容啦！

内容的提问来源于stack exchange，提问作者ixcode