如何将主题标签链接集成到网页中并基于该主题标签加载模式？答案

【问题标题】：How to integrate a hashtag link into a webpage and load a modal based on that hash tag?如何将主题标签链接集成到网页中并基于该主题标签加载模式？
【发布时间】：2015-01-19 06:10:22
【问题描述】：

对于职业页面，我使用引导模式从远程 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;}
}

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

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

可能是这样的：

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

【讨论】：

嘿。谢谢你的回答。模型正在显示..但它没有加载相关链接的内容。它只是显示一个空白模态..我希望模态从 html 中的 a 标签中提供的远程 url 加载内容..我该怎么做？
我明白了。您可以在此处找到此问题的答案：stackoverflow.com/questions/18378720/… 更改我的代码中的行为，以便将“远程”添加为模态函数的选项。请注意，'remote' 选项已弃用，将在 v4 中删除。如果您在客户端生成视图会更好（更快、更少流量）。

【解决方案2】：

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

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

【讨论】：