当点击侧边栏，只更改屏幕的一部分

-1

我有一个问题，我不能直接问，但会尝试尽可能地解释，所以你可以帮助我。当点击侧边栏，只更改屏幕的一部分

的事情是下一个：我想提出一个关于一些足球联赛的项目，我有一个侧边栏列出了比赛的回合这样

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

来源

2017-07-18 dravenzr

这听起来像你正在寻找创建一个[单页应用程序]（https://en.wikipedia.org/wiki/Single-page_application）。有很多JavaScript框架可用来做到这一点。在选择一个之前，你的问题可能太宽泛了...... – War10ck

研究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>

$(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; 
}

来源

2017-07-18 18:15:17 rstumbaugh

非常感谢你们，看起来AJAX确实做到了这一点，并且我设法做到了我想做的事。 – dravenzr

这是很难答wer没有详细信息，但是你可以在一个元素中创建页面的主体（例如div），并在点击链接时写入innerHTML。根据你想要在主体中进行什么，你可以把它全部作为JS中的字符串，或者最好通过AJAX加载数据。参见：https://www.w3schools.com/xml/ajax_intro.asp。他们有很多很好的示例代码。

来源

2017-07-18 18:17:34 Ethan

在你只是想用一个新的静态内容更新您的容器的情况下，你可以添加一个单击事件监听器侧边栏：

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>

来源

2017-07-18 18:22:42 SLePort

当点击侧边栏，只更改屏幕的一部分

回答

相关问题