當點擊側邊欄，只更改屏幕的一部分

-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

當點擊側邊欄，只更改屏幕的一部分

回答

相關問題