如何将哈希标签链接集成到网页中并加载幻灯片内容？

Question

当用户单击按钮时，我有一个幻灯片内容，我想显示带有标签的链接。例如：www.tes.com/index.html#page。然后，当我要共享链接www.tes.com/index.html#page时，滑块将打开。我怎样才能做到这一点？任何建议或帮助将不胜感激。谢谢

这是我显示幻灯片内容的代码

jQuery(document).ready(function($){
    	$('.cd-btn').on('click', function(event){
    		event.preventDefault();
    		$('.cd-panel').addClass('is-visible');
    	});
    //close the lateral panel
    	$('.cd-panel').on('click', function(event){
    		if( $(event.target).is('.cd-panel') ||      $(event.target).is('.cd-panel-close') ) { 
    			$('.cd-panel').removeClass('is-visible');
    			event.preventDefault();
    		}
    	});
});

.no-touch .cd-main-content .cd-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 20px rgba(0,0,0,.3)}.cd-panel{position:fixed;top:0;left:0;height:100%;width:100%;visibility:hidden;-webkit-transition:visibility 0s .6s;-moz-transition:visibility 0s .6s;transition:visibility 0s .6s}.cd-panel::after{position:absolute;top:0;left:0;width:100%;height:100%;background:0 0;cursor:pointer;-webkit-transition:background .3s .3s;-moz-transition:background .3s .3s;transition:background .3s .3s}.cd-panel.is-visible{visibility:visible;-webkit-transition:visibility 0s 0s;-moz-transition:visibility 0s 0s;transition:visibility 0s 0s;z-index:3}.cd-panel.is-visible::after{background:rgba(0,0,0,.6);-webkit-transition:background .3s 0s;-moz-transition:background .3s 0s;transition:background .3s 0s}.cd-panel-close::after,.cd-panel-close::before{content:'';webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.cd-panel.is-visible .cd-panel-close::before{-webkit-animation:cd-close-1 .6s .3s;-moz-animation:cd-close-1 .6s .3s;animation:cd-close-1 .6s .3s}.cd-panel.is-visible .cd-panel-close::after{-webkit-animation:cd-close-2 .6s .3s;-moz-animation:cd-close-2 .6s .3s;animation:cd-close-2 .6s .3s}@-webkit-keyframes cd-close-1{0%,50%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(45deg)}}@-moz-keyframes cd-close-1{0%,50%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(45deg)}}@keyframes cd-close-1{0%,50%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}}@-webkit-keyframes cd-close-2{0%,50%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(-45deg)}}@-moz-keyframes cd-close-2{0%,50%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(-45deg)}}@keyframes cd-close-2{0%,50%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}}.cd-panel-header{position:fixed;width:90%;height:50px;line-height:50px;background:rgba(255,255,255,.96);z-index:2;box-shadow:0 1px 1px rgba(0,0,0,.08);-webkit-transition:top .3s 0s;-moz-transition:top .3s 0s;transition:top .3s 0s}.cd-panel-header h1{font-weight:700;color:#910100;padding-left:5%;line-height:.1}.from-left .cd-panel-header,.from-right .cd-panel-header{top:-50px}.from-right .cd-panel-header{right:0}.from-left .cd-panel-header{left:0}.is-visible .cd-panel-header{top:0;-webkit-transition:top .3s .3s;-moz-transition:top .3s .3s;transition:top .3s .3s}@media only screen and (min-width:768px){.cd-panel-header{width:70%}}@media only screen and (min-width:1170px){.cd-panel-header{width:50%}}.cd-panel-close{position:absolute;top:0;right:0;height:100%;width:60px;display:inline-block;overflow:hidden;text-indent:100%;white-space:nowrap}.cd-panel-close::after,.cd-panel-close::before{position:absolute;top:22px;left:20px;height:3px;width:20px;background-color:#424f5c;-webkit-backface-visibility:hidden;backface-visibility:hidden}.cd-panel-close::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.cd-panel-close::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.no-touch .cd-panel-close:hover{background-color:#424f5c}.no-touch .cd-panel-close:hover::after,.no-touch .cd-panel-close:hover::before{background-color:#fff;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;transition-duration:.3s}.no-touch .cd-panel-close:hover::before{-webkit-transform:rotate(220deg);-moz-transform:rotate(220deg);-ms-transform:rotate(220deg);-o-transform:rotate(220deg);transform:rotate(220deg)}.no-touch .cd-panel-close:hover::after{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}.cd-panel-container{position:fixed;width:90%;height:100%;top:0;background:#dbe2e9;z-index:1;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;transition-duration:.3s;-webkit-transition-delay:.3s;-moz-transition-delay:.3s;transition-delay:.3s}.from-right .cd-panel-container{right:0;-webkit-transform:translate3d(100%,0,0);-moz-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);-o-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.from-left .cd-panel-container{left:0;-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);-o-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.is-visible .cd-panel-container{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-delay:0s;-moz-transition-delay:0s;transition-delay:0s}@media only screen and (min-width:768px){.cd-panel-container{width:70%}}@media only screen and (min-width:1170px){.cd-panel-container{width:50%}}.cd-panel-content{position:absolute;top:0;left:0;width:100%;height:100%;padding:70px 5%;overflow:auto;-webkit-overflow-scrolling:touch}.cd-panel-content p{font-size:14px;font-family:oswaldlight,serif;color:#424f5c;line-height:1.4}.cd-panel-content p:first-of-type{margin-top:0}@media only screen and (min-width:768px){.cd-panel-content p{line-height:1.6}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#live" class="cd-btn btn-detail" style="color:#000;text-decoration:none;">Detail</a>

<div class="cd-panel from-right" id="live">
  <header class="cd-panel-header">
    <h1>Page Tes</h1>
    <a href="#" class="cd-panel-close">Close</a>
  </header>
<div class="cd-panel-container">
  <div class="cd-panel-content">
    <p>Lorem Ip Sum</p> 
  </div><!-- cd-panel-content --> 
</div><!-- cd-panel-container -->