How to change url when using include related html page

Question

How to change url path, while using include html method at javascript in inner tab container. Am using single page layout in my web site, and used tab style, each tab have own html page with include method.

I have attached my sample file, Please suggest how to url path changed without refreshing page.

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>

I Hope, will understand my request, sorry for poor english.

i don't understand what you mean ,any just check this link https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page — Sreejesh K Nair, Dec 15 '17 at 07:09

score 1 · Accepted Answer · answered Dec 15 '17 at 07:30

1

You can use window.location.hash = "#"+cityName; If you want change url without refreshing page.

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;

}

answered Dec 15 '17 at 07:30

Muhammet Can TONBUL

3,217
3
25
37

Thanks, @Muhammet, If it is possible to change url with externsion(eg: submenu1.html, submenu2.html, submenu3.html)? – Karthikeyan Dec 15 '17 at 08:26
`window.location.hash = "#"+cityName+".html";` you want this or ? – Muhammet Can TONBUL Dec 15 '17 at 08:49
your output is: local/index.html#Submenu1.html, expetectation output output is: local/Submenu1.html. It is possible? – Karthikeyan Dec 15 '17 at 09:02
You already in local/index.html. I think, i can't. Because right uses this `local/index.html#Submenu1.html` – Muhammet Can TONBUL Dec 15 '17 at 09:09

How to change url when using include related html page

1 Answers1