我有一个问题,我不能直接问,但会尽量解释,所以你可以帮助我。
接下来的事情是:我正在制作关于一些足球联赛的项目,我有一个侧边栏,列出了这样的比赛轮次
<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。
答案 0 :(得分:0)
调查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;
}
答案 1 :(得分:0)
如果没有细节,很难回答,但是你可以在一个元素(例如div)中创建页面的主体,并在点击链接时写入innerHTML。根据您想要在主体中使用的内容,您可以将其全部作为JS中的字符串,或者最好通过AJAX加载数据。见:https://www.w3schools.com/xml/ajax_intro.asp。他们有很多很好的示例代码。
答案 2 :(得分:0)
如果您只想使用新的静态内容更新容器,只需在侧边栏中添加点击事件监听器即可:
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>