include 관련 html 페이지를 사용할 때 URL을 변경하는 방법

Question

내부 탭 컨테이너의 javascript에서 include html 메서드를 사용하는 동안 url 경로를 변경하는 방법. 내 웹 사이트에서 단일 페이지 레이아웃을 사용하고 탭 스타일을 사용하고 있습니다. 각 탭에는 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; 

} 

난 당신이 무슨 뜻인지 이해가 안