如何在一個頁面中製作不同的部分（解釋裏面）

基本上我試圖實現的是爲我的網站製作一個傳呼機。基本上有一個索引頁面，例如，如果有人點擊「服務」，它會將它們發送到服務頁面。這個「服務」頁面將顯示5或6個服務，全部在一個頁面中。所以基本上當用戶點擊一個導航項時，它會使用jQuery滾動到顯示信息的div。如何在一個頁面中製作不同的部分（解釋裏面）

現在我不想要的是用戶看到他/她實際閱讀的部分下面的部分。例如，我有一個名爲版本和另一個概念的服務。如果我正在閱讀「版本」部分，我現在不想看到「構想」，除非我滾動到它。我的第一個想法是使用利潤率，但我的意思是，如果我在1024x768顯示器上，保證金將不會與1920x1080相同。

所以基本上，我正在尋找一種方式來顯示一個頁面上我對我的服務內容，但顯示的每個不同的服務，所以，除非遊客卷軸，其下的下一部分是沒見過。

希望它是有道理的，並感謝您的支持和幫助！

來源

2012-06-05 user990460

您是否試圖在一個頁面中製作標籤頁內容？ http://jqueryui.com/demos/tabs/可能是您的解決方案。假設你點擊最後一個內容塊，上面的所有內容都應該可見？您希望它滾動到下一個內容，而不僅僅是顯示/隱藏？ –

不是真的，我想顯示一個正常的頁面，但如果這不是我們希望看到的一個接下來的內容不應被看作。例如，現在如果您點擊「版本」，它將滾動到版本內容，但在您下面會看到「概念」及其內容。最簡單的方法是添加，讓我們說500px的邊距爲「版」，但將與每個屏幕分辨率 – user990460

不同若您在內容容器我相信上使用一個固定的高度。如果我正確地關注你，你是從上到下滾動內容，而不是從左到右？ –

我想通過圖像您上傳，這是你在找什麼：

HTML

<article> 
<h1>Edition</h1> 
<div>Sed ut perspiciatis unde omnis iste natus error sit </div> 
</article>

CSS

html {height: 100%;} 
body {margin: 0; padding: 0; height: 100%;} 
article {width: 500px; height:100%; margin: 0 auto;}

http://jsfiddle.net/5HLNE/

來源

2012-06-08 10:17:18

您需要包括分頁技術在你的HTML頁面中，每個部分都需要提供一個ID和一個宣傳r鏈接。

來源

2014-07-18 20:10:38

那麼，你需要定義一個導航欄類和一個用於存儲頁面各個部分的類。將該部分的高度設置爲100％將確保該部分佔據用戶屏幕的整個高度。請注意，這隻適用於HTML和body的高度都設置爲100％的情況。

設置您的資產淨值，因此位置固定在屏幕上，並使用鏈接調用導航到基於鏈路ID的正確部分的JavaScript函數。

HTML：

<nav> 
    <a class="nav" id="1" href="#">Section 1</a> 
    <a class="nav" id="2" href="#">Section 2</a> 
    <a class="nav" id="3" href="#">Section 3</a> 
</nav> 
<div class="section" id="1"> 
    Section 1 
</div> 
<div class="section" id="2"> 
    Section 2 
</div> 
<div class="section" id="3"> 
    Section 3 
</div>

CSS：

a { 
    margin: 0 10px 0 10px; 
    text-decoration: none; 
    color: black; 
} 

html { 
    height: 100%; 
} 

body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

nav { 
    position: fixed; 
    width: 100%; 
    background-color: lightgrey; 
    text-align: center; 
    margin-bottom: 20px; 
} 

.section { 
    height: 100%; 
    padding-top: 20px; 
}

JS：

$('.nav').click(function() { 
    var id = $(this).attr('id'); 
    $('html, body').animate({ 
     scrollTop: ($('#' + id + '.section').offset().top) 
    }, 1000); 
});

演示：

http://jsfiddle.net/dqcuN/2/

希望這是你正在尋找。

來源

2014-07-18 20:44:30

我不瞭解他，但這正是我所期待的，謝謝！ – ZachCB

如何在一個頁面中製作不同的部分（解釋裏面）

回答

相關問題