单击侧边栏时，仅更改屏幕的一部分

Question

我有一个问题，我不能直接问，但我会尽量解释，所以你可以帮助我。

接下来是：我正在制作一个关于某个足球联赛的项目，我有一个边栏，其中列出了这样的比赛轮次

<div id="sidebar">
            <h2>2017/18</h2>
            <h4>1st Qualif. Round</h4>
            <h4>2nd Qualif. Round</h4>
            <h4>3rd Qualif. Round</h4>
            <h4>Play-Offs</h4>
</div>

没什么大不了的，因为我尽量保持简单。我会让它们可点击，但我不希望它们将我带到另一个页面，我希望它们只是更改页面主容器的一部分。

有点像 http://www.flashscore.com。当您单击更改日期时，url 保持 flashscore.com，但页面更改为您单击的日期。

我知道这听起来很疯狂，但如果你理解我的话，我会根据你的需要做进一步的解释。

此外，我对 Javascript 还很陌生，但会尝试将其合并到我正在制作的网站中，因为我认为这是纯粹的 javascript。

Answer 1

查看 AJAX，这就是您想要从服务器获取新信息而无需执行整页 post 返回/重新加载的操作。它主要是 JS，可能还有一些 CSS 来显示/隐藏内容。我在手机上，所以我不能给一个很好的演示，但我会在下班时尝试。

编辑：我以为您是在询问有关加载新数据的问题。如果您只想更改要显示的内容，应该比这更容易。稍后我会 post 更多详细信息

更新：相关fiddle：https://jsfiddle.net/44ka1be6/

html

<div class="wrapper">
  <div class="sidebar">
    <div>
      Stuff 1
    </div>
    <div>
      Stuff 2
    </div>
    <div>
      Stuff 3
    </div>
  </div>
  <div id="content">
    Default stuff
  </div>
</div>

js

$(document).ready(function() {
    $('.sidebar div').click(function(e) {
    $('#content').text($(this).text())
  })
})

css

.sidebar, #content {
  display: inline-block;
}

.sidebar div {
  border: 1px solid black;
  font-size: 18px;
  padding: 8px 5px;
}

.wrapper {
  border: 1px solid black;
}

Answer 2

如果没有详细信息很难回答，但是您可以将页面的主体放在一个元素中（例如 div）并在他们单击 [=15= 时写入 innerHTML ].根据你想放在主体中的内容，你可以将它们全部作为 JS 中的字符串，或者最好通过 AJAX 加载数据。参见：https://www.w3schools.com/xml/ajax_intro.asp。他们有很多很好的示例代码。

Answer 3

如果您只想用新的静态内容更新您的容器，您可以只向侧边栏添加一个点击事件侦听器：

sidebar = document.getElementById('sidebar');
container = document.getElementById('container');
sidebar.addEventListener('click', function(e) {
  container.innerHTML = "New content";
});

#sidebar {
  float: left;
}

<div id="sidebar">
  <h2>2017/18</h2>
  <h4>1st Qualif. Round</h4>
  <h4>2nd Qualif. Round</h4>
  <h4>3rd Qualif. Round</h4>
  <h4>Play-Offs</h4>
</div>
<div id="container">Content</div>

单击侧边栏时，仅更改屏幕的一部分

When click on sidebar, change only part of the screen

javascript

sidebar