Question

对于职业页面，我使用了bootstrap模式来从远程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");
    }
}

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

2 个答案: