javascript - 如何将主题标签链接集成到网页中并根据该主题标签加载模式？

Question

对于职业页面，我使用 Bootstrap 模式从远程 html 文件动态加载内容(职位描述)。现在我想将一个标签链接集成到页面中，这样当我给某人一个特定 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

我建议在 Bootstrap 过程中读取location.hash变量，然后使用switch(或其他方法)来确定要显示的模态并显示该模态。

可能是这样的:

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