单页网站，隐藏了多个部分直到其链接被点击

我不知道如何恰当地说出这个问题，因为几个小时后，我仍然没有找到将实现我想要的代码。。。单页网站，隐藏了多个部分直到其链接被点击

我不想要一个连续滚动的多个“部分”的单页网站。我想创建一个包含四个内容部分的单页网站，每个部分都将保持隐藏状态，直到点击指定的链接&显示内容。我正在寻找简单的框架--- 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

单页网站，隐藏了多个部分直到其链接被点击

回答

相关问题