如何将主题标签链接集成到网页中并基于该哈希标签加载模态

Question

对于职业页面，我使用了引导模式，从远程html文件动态加载内容（工作描述）。现在我想将一个hastag链接集成到页面中，这样当我给某人一个指向特定jd的链接时，比如说 www.example.com/careers/#javascriptdeveloper，它应该打开职业页面并打开javascript开发人员特定的模式，而无需用户单击页面上的任何链接。我该怎么做？

这是我的HTML和CSS。使用JavaScript在每次单击链接并且模态加载内容时清除缓存。

    <div class="modal slide fade right" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg pull-right" style="margin:0 ;padding:0 !important">
    <div class="modal-content">
    </div>
  </div>
</div>


<div class="col-xs-12 col-sm-12">
              <!-- Tab panes -->
              <div class="tab-content col-xs-12 col-sm-12">
                <div role="tabpanel" class="tab-pane active" id="technology" >
                    <div class="col-xs-12 col-sm-12 careers_jobdesc"> 
                        <a href="/careers/tech/javascriptappdeveloper/" class="list-group-item" data-toggle="modal" data-target="#myModal" data-direction="right">
                                <h4 class="list-group-item-heading">Javascript App Developer
                                    <br>
                                    <small>Number of positions : 2</small><br>
                                    <small>Location</small>
                                </h4>                                    
                        </a>   
                    </div>
                    <div class="col-xs-12 col-sm-12 careers_jobdesc"> 
                        <a href="/careers/tech/datascientist/" class="list-group-item" data-toggle="modal" data-target="#myModal" data-direction="right">
                                <h4 class="list-group-item-heading">Data Scientist
                                    <br><small>Number of positions : 1</small><br>
                                    <small>Location</small>
                                        </h4>                                    
                        </a>   
                    </div>
</div>
</div>
</div>


<!------css --------------->
.modal.fade:not(.in).right .modal-dialog {
    -webkit-transform: translate3d(125%, 0, 0);
    transform: translate3d(125%, 0, 0);
}
.modal-content{
    min-height:700px !important;
    border-radius: 0;}
}

Answer 1

我建议在引导过程中读取location.hash变量，然后使用switch（或其他方法）来确定要显示的模态和显示模态。

它可以是这样的：

// ...
var hash = window.location.hash.substr(1);
switch(hash){
  case 'javascriptdeveloper':
    $('#myModal').modal('show');
  break;
}

Answer 2

如果您有触发器按钮来加载当前页面中可用的内容，则可以在位置哈希匹配时触发该按钮：

if (window.location.hash) {
    var hash = window.location.hash.replace('#', "");
    if (hash === 'javascriptdeveloper') {
        $('#the-trigger-button').trigger("click");
    }
}