如何使用Javascript在标签内使用hashchange更新url

Question

我想让我的页面显示URL中的当前选项卡，请记住我还在学习，所以我的编码技能不是最好的。 我通常会为此使用PHP，但是有人要求我坚持使用Javascript / JQuery。

到目前为止，我已经设法通过简单的脚本使选项卡在div中动态显示内容。

这是我的索引位：

<div class="row">
      <div class="col-md-3 col-lg-3">
        <div class="custom-left-tabs -text--uppercase">
          <div class="custom-left-tabs-btn hidden-lg hidden-md">
            <a href="#lefttabs" aria-expanded="false" data-toggle="collapse">Menu<i class="fa fa-angle-down"></i></a>
          </div>
          <ul id="lefttabs" class="list-unstyled collapse">
            <li class="sub-heading">Getting Started</li>
            <li><a data-toggle="tab" href="pages/first.html">First</a></li>
            <li><a data-toggle="tab" href="pages/second.html">Second</a></li>
          </ul>
        </div>
      </div>
      <div id="content" class="tab-content col-lg-9 -bg--white -padding--m">
      </div>
    </div>

这是我的脚本：

$(document).ready(function(){
  $("#content").load("pages/first.html");
});

$("li").find('a').click(function(){
  var page = $(this).attr('href');
  $("#content").load(page);
  return false;
});

理想情况下，我宁愿不要将所有内容都塞进一页。 我检查了许多类似的问题/视频，但我找不到真正的缺失之处。

我的问题确实是我该如何编写一个脚本来完成显示URL上当前标签的额外工作。

Answer 1

在这里，可以使用效果很好的iframe来完成此操作，但是正如您所建议的，我已经尝试过了。 这是我的代码。 参考与您之前提供的相同。

现在我在这里显示代码，以这种方式使用js：

<script src="jquery.min.1.4.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
     $(function(){
         $("#tabs a").click(function(e){
              $("#tabs li").removeClass("on");
              $(this).parent("li"). addClass("on");
              var page = this.hash.substr(1);
              $("#content_wrapper").block();
              $.get(page+".html",function(html){
                   $("#content").html(html);
                   $("#content_wrapper").unblock();
              });
         });
     });
</script>

和带有“ <div> ”标签的html代码。

<ul id="tabs">
    <li><a href="#first">TAb1</a></li>
    <li><a href="#second">TAb2</a></li>
</ul>
<div id="content_wrapper">
    <div id="content">
    </div>
</div>

我也用过jquery.min.js和blocjUI.js和CSS CSS代码在这里

<style>
ul {
    margin:0px;
    padding:0px;
    overflow:hidden;
}
li {
    float:left;
    list-style:none;
    padding:10px;
    background-color:#333;
    border: 1px solid #ccc;
}
li a {
    color: #FFF;
    text-decoration:none;
    font-family:arial;
}
#content_wrapper {
    width:400px;
    height:300px;
    background-color: #ccc;
    margin: 0px;
    padding:6px;
    overflow: hidden;
}
#content {
    font-family: arial;
}
li.on {
    background-color:#ccc;
}
li.on a {
    color:#333;
}

您将在一页中得到两个不同的页面。

Scrren1：

屏幕2：