Question

我一定不知道如何正确地说出这个问题，因为几个小时之后，我还没有找到能够实现我想要的编码。。。

我不想要一个连续滚动的多页＆＃39;部分网页。我想创建一个包含四个内容部分的单页网站，每个部分都将保持隐藏状态，直到为其指定的链接被点击为止。揭示内容。我正在寻找简单的框架--- html，css，JavaScript / Jquery /等等（我不确定哪个最好）。

复制我想要的网站：http://giorgibou.com/

Answer 1

虽然这个问题有点模糊，但我相信你需要研究的是CSS显示值。使用jQuery的切换方法，通过单击链接或按钮隐藏/显示部分非常简单：

＆＃13;

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

＆＃13;

Answer 2

我要说的是更多的建议/提示而非实际解决方案。

我访问了 http://giorgibou.com/链接并进行了一些探索。

我意识到每次点击导航时，网站的网址都不会改变。我不知道你用什么工具来建立一个网站，但如果你使用的是javascript，html，css和jquery，你可以简单地研究一下像Node JS这样的框架。您可以轻松地操纵和控制路线。

例如：如果单击“主页”链接，则渲染“some_page.html”而不指向新链接或任何链接。

我希望这对你有所帮助。在构建单页网站/动态网站/静态网站时，Node JS是一个非常好的框架。

Answer 3

您可以使用CSS隐藏所有页面部分，除非应用.active类。您可以使用javascript或jquery在相应的链接上添加和删除.active类，就像您说的那样：

<强> 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;
}

<强> JS

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

Answer 4

我制作了您在此处发布的网站的基本副本，请查看：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%;
}

然后你可以用jQuery，ex

做一些onclick（）事件

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

然后将.slider的margin-top属性更改为负窗口高度的倍数（使其向上滚动）并将其设置为动画

基本上左边有一个侧边栏和一个内容区域。两者都向左浮动，因此它们彼此对齐，并且它们的高度设置为窗口的整个高度。在右边的div中，有另一个部分是窗口高度的4倍。它包含您的内容。当您单击链接时，jQuery将更改该滑块窗口的margin-top，从而上下移动它。如果您将溢出：隐藏在main_window之外，您将更好地了解正在发生的事情。要获得更多内容，只需调整main_window部分的高度并相应地修改JavaScript。没有切换案例，有一种更优雅的方式来做JavaScript，但我很懒。

Answer 5

这是一个非常广泛的问题。您可以通过右键单击并选择“查看来源”来查看您要在该网站上实施的效果。＆＃39;根据您的需要，有多种方法可以使用或不使用外部库来实现此目的。

一个不那么华而不实的解决方案是默认情况下每个部分都有样式{display：none}，然后在按钮点击时更改。如果你这样做了，你还必须在点击按钮时重置其他部分。

一个页面的网站，其中隐藏了多个部分，直到单击其链接

5 个答案: