Javascript 更改一些html元素，以及更改url而不重新加载页面

我有一个网站，有一个很长的形式。该站点还有一些其他部分需要更改，而无需重置该表单。我计划使用iframe加载页面的其他部分。 页面上的侧边栏用作导航。我希望侧边栏中的链接可以更改iFrame指向的url，并更改实际的url栏。但不重置/重新加载任何其他iFrame

谢谢

注：我是JavaScript的新手，所以完整的例子会有所帮助

以下是我的一些代码：

<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
  <li class=list>
    <a onclick="edit-iframe-1" id="username">This will change iframe 1 to point to a user</a>
    <a onclick="edit-iframe-2" id="username">This will change iframe 2 to point to a user</a>
  </li>
  <li class=list>
    <a onclick="edit-iframe-1" id="username">This will change iframe 1 to have a different user</a>
    <a onclick="edit-iframe-2" id="username">This will change iframe 2 to have a different user</a>
  </li>
</ul>
</div>
<div id=iframediv1>
  <iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
  <iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>

这将更改iframe 1以指向用户
这将更改iframe 2以指向用户


这将更改iframe 1，使其具有不同的用户
这将更改iframe 2，使其具有不同的用户

---

其思想是侧边栏中的列表包含所有不同的用户名，无论您单击哪个用户名，它都将加载相应的页面。url中唯一需要更改的部分是

？user=

之后的部分。您可以尝试使用history.pushState。不幸的是，浏览器支持将仅限于较新版本

---

这个答案应该会让你知道你面对的是什么：

我认为你应该使用javascript。我认为这可能是一个解决办法

 <SCRIPT LANGUAGE="JavaScript">
    function newLocation1(nwloc){
        document.getElementById('iframe1').src = "/path/file?user="+nwloc;
    }
    function newLocation2(nwloc){
        document.getElementById('iframe2').src = "/path/differentfile?user="+nwloc;
    }
    </script>


    <div class="sidebar">
    <input type="text" placeholder="search for accounts" id="search" />
    <ul id=sidebar-list>
      <li class=list>
        <a onclick="javascript:newLocation1('username1')" >This will change iframe 1 to point to a user</a>
        <a onclick="javascript:newLocation2('username1')" >This will change iframe 2 to point to a user</a>
      </li>
      <li class=list>
        <a onclick="javascript:newLocation1('username2')" >This will change iframe 1 to have a different user</a>
        <a onclick="javascript:newLocation2('username2')" >This will change iframe 2 to have a different user</a>
      </li>
    </ul>
    </div>
    <div id=iframediv1>
      <iframe id="iframe1" src="/path/file?user=username1"></iframe>
    </div>
    <div id=iframediv2>
      <iframe id="iframe2" src="/path/differentfile?user=username1"></iframe>

</div>

功能新位置1（nwloc）{
document.getElementById（'iframe1'）.src=“/path/file？user=“+nwloc；
}
功能新位置2（nwloc）{
document.getElementById（'iframe2'）.src=“/path/differentitfile？user=“+nwloc；
}


这将更改iframe 1以指向用户
这将更改iframe 2以指向用户


这将更改iframe 1，使其具有不同的用户
这将更改iframe 2，使其具有不同的用户

下面是一个简单的解决方案，它使用jQuery从单击的链接中提取href，并将其插入到目标iframe的src属性中

<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id="sidebar-list">
  <li class="list">
    <a href="/path/file?user=mike" data-target="iframe1">Mike - Frame 1</a>
    <a href="/path/differentfile?user=mike" data-target="iframe2">Mike - Frame 2</a>
  </li>
  <li class=list>
    <a href="/path/file?user=joe" data-target="iframe1">Joe - Frame 1</a>
    <a href="/path/differentfile?user=joe" data-target="iframe2">Joe - Frame 2</a>
  </li>
</ul>
</div>
<div id=iframediv1>
  <iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
  <iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".sidebar a").click(function(event) {
            event.preventDefault();

            var targetID = $(this).attr("data-target");
            $("#" + targetID).attr("src", $(this).attr("href"));
        });
    });
</script>

$（文档）.ready（函数（）
{
$（“.sidebar a”）。单击（函数（事件）{
event.preventDefault（）；
var targetID=$（this.attr（“数据目标”）；
$（“#”+targetID.attr（“src”），$（this.attr（“href”）；
});
});

我们可以看看您的一些代码吗？也许只是html，然后更改哪些元素？你的问题太笼统了。以pjax为例，我在我的主要帖子中添加了这个例子，谢谢你的快速回复。你应该看看如何使用ajax。我只想使用jQuery，因为我知道ajax，但我更喜欢使它简单（对我来说），并将页面的两部分保持在iframe中。然后它只需要刷新iFrame来更改内容…链接文本将等同于用户名，如果这有帮助的话，加上的id将是应该添加为用户名的内容。我不认为在查看该帖子后更改url是一个很大的问题，但是我的主要问题是在点击链接时改变iframe的位置。谢谢这正是我想的。。。我刚开始写这个剧本。只有一个问题：我更改url的想法是将

/path/更改为/current/page.html？frame1=第一帧的用户&frame2=第二帧的用户

，这是我的目标，也是脚本中缺少的唯一元素。这正是我需要的，我很惊讶你预测了搜索功能…我已经开始安装了，谢谢！如果你想看看这是干什么的，去