仅使用javascript在div中加载另一个html文件时更改url_Javascript_Html_Css

仅使用javascript在div中加载另一个html文件时更改url

javascript html css

仅使用javascript在div中加载另一个html文件时更改url,javascript,html,css,Javascript,Html,Css,我正在尝试将另一个html文件加载到div中。我成功地得到了它。现在，我还需要我的网址相应地改变。如何在div中加载另一个html文件时更改url？？我只需要使用javascript就可以了函数加载_tab1（）{ document.getElementById（“content1”）.innerHTML=''； } 函数加载_tab2（）{ document.getElementById（“content2”）.innerHTML=''； } 表1 表2 第1页使用histo

我正在尝试将另一个html文件加载到div中。我成功地得到了它。现在，我还需要我的网址相应地改变。如何在div中加载另一个html文件时更改url？？我只需要使用javascript就可以了


函数加载_tab1（）{
document.getElementById（“content1”）.innerHTML=''；
}
函数加载_tab2（）{
document.getElementById（“content2”）.innerHTML=''；
}


表1
表2
第1页

使用history.pushState

查看更多详细信息

基于@cdoshi-answer，我们需要执行以下操作，这将基于单击标签重写url。但请注意，如果我们刷新页面，将获得调用html文件

<!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>


函数加载_tab1（）{
var stateObj={foo:“tab1”}；
pushState（stateObj，“第1页”，“tab1.html”）；
document.getElementById（“content1”）.innerHTML=''；
}
函数加载_tab2（）{
var stateObj={foo:“tab2”}；
pushState（stateObj，“第2页”，“tab2.html”）；
document.getElementById（“content2”）.innerHTML=''；
}
表1
表2
第1页