How to get a shareable link for a hidden content opened dynamically using JS or JQuery?-CodePudding

This question is related to this post: Implementing navigation side bar to load <div>s link click

What I want is basically to be able to change and load content on the right part of a website by clicking links on the sidebar.

The code below was from the post I mentioned above.

<!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 >

<header>
   <h1>My Company</h1>
</header>

 <section id="container1">
    <nav  style="width: 20%; float: left;">
      <ul>
        <li><a href="#userGuide"  onclick='loadContent("#userGuide")'>User Guide</a></li>
        <li><a href="#SOP"  onclick='loadContent("#SOP")'>SOP</a></li>
        <li><a href="#procedurePages"  onclick='loadContent("#procedurePages")'>Procedure pages</a></li>
        <li><a href="#departmentInformation"  onclick='loadContent("#departmentInformation")'>Department information</a></li>
        <li><a href="#hoursOfOperations"  onclick='loadContent("#hoursOfOperations")'>Hours of operations</a></li>
      </ul>
    </nav>

    <div  id="loadOnClick" style="width:75%; float: right;">
        
    </div>
</section>

<div id="userGuide" >
    <h1>User Guide</h1>
    <p>This is the userguide for employees</p>
</div>

<div id="SOP" >
    <h1>SOP</h1>
    <p>This is the Statement of purpose for employees</p>
</div>

<div id="procedurePages" >
    <h1>Procedure pages</h1>
    <p>This is the Procedure pages for employees</p>
</div>

<div id="departmentInformation" >
    <h1>Department information</h1>
    <p>This is the Department information for employees</p>
</div>

<div id="hoursOfOperations" >
    <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>

It does this well, but the only thing missing is to get a shareable link to others. So for example if I share the link docs.html#Overview to others, they'll be able to open exactly the page I've specified.

Right now, if I give a link to others containing a # it still loads by default and not go to the specific page.

I'm planning to use it for a documentation part, so it's very important a certain page is shareable. How do I go about to changing this script to handle this?

Thank you in advance for any help!

CodePudding user response：

There is not a lot you need to do, most of it is already built into how HTML works.

Links with href="#something" set the page URL to "...#something". That's called the hash. It's accessible through location.hash in JavaScript. Those URLs already are bookmarkable.

Loading a page with a hash will make the browser scroll to the element with that ID, and jQuery/CSS selectors will find the element with that ID, so you can use the element's href and the location.hash directly in code.

jQuery only needs to handle toggling the element visibility when the hash changes due to link clicks. Conveniently, the browser issues hashchange events whenever the location.hash changes.

$(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 >
  <div id="userGuide" >
    <p>This is the userguide for employees</p>
  </div>
  <div id="SOP" >
    <p>This is the Statement of purpose for employees</p>
  </div>
  <div id="procedurePages" >
    <p>This is the Procedure pages for employees</p>
  </div>
  <div id="departmentInformation" >
    <p>This is the Department information for employees</p>
  </div>
  <div id="hoursOfOperations" >
    <p>This is the Hours of operations for employees</p>
  </div>
</div>

<button id="simulateLoad">Simulate page load for #procedurePages</button>

CodePudding user response：

Possible approach,

Fetch the current url using, window.location.href
split the url and get the string after #.
With that you can hide and show the specific data (May be onl oad)

CodePudding user response：

Replace loadContent("#userGuide"); inside your document ready function to loadContent(window.location.href.replace(“docs.html/or your host“,””));