include関連HTMLページを使用してURLを変更する方法

Question

内部タブコンテナのjavascriptでinclude htmlメソッドを使用しているときにURLパスを変更する方法。 私のウェブサイトで1ページレイアウトを使用し、タブスタイルを使用していますが、各タブにはincludeメソッドを持つ独自のhtmlページがあります。

サンプルファイルを添付しました。ページを更新せずにURLパスを変更する方法をお勧めします。

function openCity(evt, cityName) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
} 
 

 
// Get the element with id="defaultOpen" and click on it 
 
document.getElementById("defaultOpen").click(); 
 

 

 
// page load 
 
document.getElementById("Submenu1").innerHTML='<object type="text/html" data="submenu1.html" ></object>'; 
 
    document.getElementById("Submenu2").innerHTML='<object type="text/html" data="submenu2.html" ></object>'; 
 
    document.getElementById("Submenu3").innerHTML='<object type="text/html" data="submenu3.html" ></object>';

/* Style the tab */ 
 
.tab { 
 
    float: left; 
 
    border: 1px solid #ccc; 
 
    background-color: #f1f1f1; 
 
    width: 30%; 
 
    height: 300px; 
 
} 
 

 
/* Style the buttons inside the tab */ 
 
.tab button { 
 
    display: block; 
 
    background-color: inherit; 
 
    color: black; 
 
    padding: 22px 16px; 
 
    width: 100%; 
 
    border: none; 
 
    outline: none; 
 
    text-align: left; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 

 
/* Change background color of buttons on hover */ 
 
.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Create an active/current "tab button" class */ 
 
.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    float: left; 
 
    padding: 0px 12px; 
 
    border: 1px solid #ccc; 
 
    width: 70%; 
 
    border-left: none; 
 
    height: 300px; 
 
}

<div class="tab"> 
 
    <button class="tablinks" onclick="openCity(event, 'Submenu1')" id="defaultOpen">SubMenu 1</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Submenu2')">SubMenu 2</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Submenu3')">SubMenu 3</button> 
 
</div> 
 

 
<div id="Submenu1" class="tabcontent"> 
 
<h1>external submenu1.html page here</h1> 
 
</div> 
 

 
<div id="Submenu2" class="tabcontent"> 
 
<h1>external submenu2.html page here</h1> 
 
</div> 
 

 
<div id="Submenu3" class="tabcontent"> 
 
<h1>external submenu3.html page here</h1> 
 
</div>

私は下手な英語のため申し訳ありませんが、私の要求を理解し、願っています。

Answer 1

window.location.hash = "#"+cityName;ページを更新せずにURLを変更したい場合は、

function openCity(evt, cityName) { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
    window.location.hash = "#"+cityName; 

}