Changing url on loading another html file in a div using only javascript
Question
I am trying to load another html file into a div.I successfuly got that. Now I also need my url to change accordingly. how to change the url on loading another html file in a div?? I need this only using javascript
<script type="text/javascript"> function load_tab1() { document.getElementById("content1").innerHTML='<object type="text/html" data="tab1.html" ></object>'; } function load_tab2() { document.getElementById("content2").innerHTML='<object type="text/html" data="tab2.html" ></object>'; } </script>
<input id="tab1" type="radio" name="tabs" checked > <label for="tab1" onclick="load_tab1()"> <span> <img src="image/idea.svg"> </span>TAB1</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2" onclick="load_tab2()"> <span> <img src="image/idea.svg"> </span>TAB2</label> <div class="master_content" id="scroll_bar"> <div class="page_head">Page 1</div> <div class="page"> <section id="content1" id="scroll_bar"> </section> <section id="content2"> </section> <section id="content3"> </section> <section id="content4"> </section> </div> </div>
2 answers
solution1
1 2017-12-07 05:13:06
使用history.pushState检查https://developer.mozilla.org/en-US/docs/Web/API/History_API了解更多详细信息
solution2
0 2017-12-07 05:38:37
Based on @cdoshi answer we need to do something like below, This will rewrite the url based on the click on the label. But please make note that if we refresh the page the call html file will be obtained.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function load_tab1() {
var stateObj = { foo: "tab1" };
history.pushState(stateObj, "page 1", "tab1.html");
document.getElementById("content1").innerHTML='<object type="text/html" data="http://localhost/my_functions/tab1.html" ></object>';
}
function load_tab2() {
var stateObj = { foo: "tab2" };
history.pushState(stateObj, "page 2", "tab2.html");
document.getElementById("content2").innerHTML='<object type="text/html" data="http://localhost/my_functions/tab2.html" ></object>';
}
</script>
</head>
<body>
<input id="tab1" type="radio" name="tabs" checked >
<label for="tab1" onclick="load_tab1()">
<span><img src="image/idea.svg"></span>
TAB1
</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2" onclick="load_tab2()">
<span><img src="image/idea.svg"></span>
TAB2
</label>
<div class="master_content" id="scroll_bar">
<div class="page_head">Page 1</div>
<div class="page">
<section id="content1" id="scroll_bar"></section>
<section id="content2"></section>
<section id="content3"></section>
<section id="content4"></section>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.