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上一样。当您单击更改日期时，该网址会保留flashscore.com，但页面会更改为您单击的日期。

我知道这一切听起来都很疯狂，但如果你理解我，我会用你需要的任何东西进一步解释。

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

Answer 1

调查AJAX，这是你想要从服务器获取新信息而不进行整页回发/重新加载的目的。它主要是JS，可能有一些CSS来显示/隐藏内容。我在移动设备上，所以我不能给出一个很棒的演示，但是当我下班时我会尝试。

编辑：看起来我以为你在问加载新数据。如果您只想更改要显示的内容，应该比这更容易。我稍后会发布更多详情

更新：相关小提琴：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）中创建页面的主体，并在点击链接时写入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>

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

3 个答案: