如何使用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：