單頁網站，隱藏了多個部分直到其鏈接被點擊

我不知道如何恰當地說出這個問題，因爲幾個小時後，我仍然沒有找到將實現我想要的代碼。。。單頁網站，隱藏了多個部分直到其鏈接被點擊

我不想要一個連續滾動的多個「部分」的單頁網站。我想創建一個包含四個內容部分的單頁網站，每個部分都將保持隱藏狀態，直到點擊指定的鏈接&顯示內容。我正在尋找簡單的框架--- HTML，CSS，JavaScript/JQuery /任何（我不知道哪個是最好的）。

一個網站，複製我想要什麼：http://giorgibou.com/

來源

2017-04-06 Blue Dream

http://www.jqueryrain.com/?m6MaiPX9 – JRR

儘管這個問題有點模糊，我相信你需要研究什麼是CSS顯示值。使用jQuery的切換方法是相當簡單的隱藏通過單擊鏈接或按鈕/顯示部分：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- These buttons hide or show both sections plus all buttons, 
 
    depending on their current display value (none or block) --> 
 
<button class="tog" style="display: none" onclick="$('.tog').toggle()"> 
 
    Section 1 
 
</button> 
 
<button class="tog" onclick="$('.tog').toggle()"> 
 
    Section 2 
 
</button> 
 
<div class="tog" style="background-color: green; color: white"> 
 
    This is Section 1. 
 
</div> 
 
<div class="tog" style="background-color: blue; color: white; display: none"> 
 
    This is Section 2. 
 
</div>

來源

2017-04-06 19:26:47 oMiKeY

-1

這是一個很廣泛的問題。您可以通過右鍵單擊並選擇「查看源代碼」來查看您想要使用的效果是如何在該網站上實現的。有或沒有外部庫有很多方法來完成這取決於你想要什麼。

一個不那麼華麗的解決方案是默認情況下每個部分的樣式爲{display：none}，然後在點擊按鈕時更改此樣式。如果你這樣做了，你還必須在點擊按鈕時重置其他部分。

來源

2017-04-06 19:27:03

我要說的是比實際解決方案更多的建議/提示。

我訪問了鏈接 http://giorgibou.com/並探索了一下。

我認識到，每次點擊導航時，網站的網址都不會改變。我不完全知道你用什麼工具創建網站，但如果你使用javascript，html，css和jquery，你可以簡單地查看像Node JS這樣的框架。您可以輕鬆操縱和控制路線。

例如：如果點擊「Home」鏈接，然後渲染「some_page.html」而不指向新鏈接或任何鏈接。

我希望這可以幫助你一點。在構建單頁網站/動態網站/靜態網站時，Node JS是相當不錯的框架。

來源

2017-04-06 19:33:26

除了將.active類應用於它之外，您可以隱藏CSS的所有頁面部分。你可以使用javascript或jquery添加和刪除。在相應的鏈接點擊活動類像你說：

HTML

<div class="page-section page-1 active"></div> 

<button class="link link-1">Page 1 link</button>

CSS

.page-section { 
    display: none; 
} 

.page-section.active { 
    display: block; 
}

function pageActivator(page) { 
    $('.page-section').removeClass('active'); 
    page.addClass('active'); 
} 

$('.link').click(function() { 
    var pageNum = parseInt($(this).attr('class').match(/\d+/g)[0]); 
    pageActivator($('.page-' + pageNum)); 
});

這裏是開始全面codepen例如：http://codepen.io/StefanBobrowski/pen/PpvBdg

來源

2017-04-06 19:38:13 StefanBob

我做了網站，你張貼在這裏的基本複製品，看看：https://jsfiddle.net/o2gxgz9r/5165/

這裏有一個簡單的結構：

<div class="sidebar"> 
    <a id="something1">Some Link</a> 
    <a id="something2">Another Link</a> 
</div> 
<div class="main_window"> 
    <section class="slider"> 

    </section> 
</div>

隨着一些CSS

.sidebar, .main_window { 
    height: 100vh; 
    float: left; 
} 

.main_window { 
    width: 70%; 
} 

.slider { 
    height: 400vh; 
    margin-top: 0; 
} 

.sidebar { 
    width: 30%; 
}

那麼你可以做一些的onclick（）與jQuery的事件，前

$('#something1').click(function() { 
    // change margin-top of .slider 
});

然後.slider的邊距屬性更改爲您的窗口高度的負倍數（使它向上滾動），並把它動畫

基本上有一個在左，一個內容的側邊欄區。兩者都向左浮動，因此它們彼此對齊，並且它們的高度被設置爲窗戶的整個高度。在右邊的div中有另一個部分是窗口高度的4倍。它擁有你的內容。當你點擊鏈接時，jQuery將更改該滑動窗口的邊緣頂部，從而使其上下移動。如果你把溢出：隱藏在main_window之外，你會對發生的事情有個更好的認識。有關更多內容，請調整main_window部分的高度並相應地修改JavaScript。沒有這種開關的情況下，有一種更優雅的方式來做JavaScript，但我很懶。

來源

2017-04-06 19:43:18 kylecblyth

單頁網站，隱藏了多個部分直到其鏈接被點擊

回答

相關問題