javascript - 删除元素并通过 .click 将它们带回来

Question

我正在尝试仅使用一个页面来构建网站。我创建了 5 <section>我将这些部分用作我的页面。我在右侧有一个固定的导航。使用以下内容:

<ul class="navigation">
        <li id="link1">ABOUT</li>
        <li id="link2">WHY HIRE ME</li>
        <li id="link3">JOURNEY</li>
        <li id="link4">INSTAGRAM</li>
        <li id="link5">CONTACT</li>         
    </ul>

我使用以下 CSS 设置了该列表的样式，因此它固定在浏览器窗口的左侧。

.navigation{
position:fixed;
z-index:1;
top:20px;
font-size:12px;
font-family: Georgia, serif;}

我尝试了一些 jQuery，但我很失败。我最理想的是在网站打开时显示第 1 部分。其余的要隐藏起来。当用户单击链接时，我希望隐藏链接关联部分以外的所有部分。

我已经查看并尝试了 .remove/.appendTo 函数和 .click 但我很挣扎

Answer 1

jQuery 没有实际删除或附加元素，而是内置了一个方法来隐藏/显示，该方法将它们的可见性设置为 false，并且浏览器呈现相邻元素，就好像缺少的元素真的不存在一样。

你可以使用它:

$('#myelement').hide();
$('#myelement').show();

要完成整个小组，我会为他们提供一个通用的 css 类(即使该类没有附加任何样式):

$('.mylinkgroup1').hide();
$('.mylinkgroup2').show();

http://api.jquery.com/hide/

http://api.jquery.com/show/