如何使用Javascript更新标签中的hashchange网址

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工作， ，但正如你建议我已经尝试过。这是我的代码。 reference和你以前一样。

现在我展示代码在这里以这种方式 用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：