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部分会显示。并将其余部分隐藏起来。当用户点击链接时，我希望隐藏与链接相关的部分之外的所有部分。

我已经查看并尝试使用.click执行.remove / .appendTo函数，但我正在努力

Answer 1

jQuery没有实际删除或附加元素，而是内置了隐藏/显示方法，将其可见性设置为false，浏览器渲染相邻元素，就好像缺少的元素不存在一样。

你可以使用它：

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

要完成整个组，我会为他们提供一个通用的css类（即使没有样式附加到该类）：

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

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

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

Answer 2

像这样的HTML结构

<div id="content_1">About content</div>
<div id="content_2">Why Hire Me content</div>
...

这个jQuery

$('.navigation li').on('click', function ()
{
    var id = $(this).attr('id').substr( $(this).attr('id').indexOf('_') + 1 );

    $('div[id^="content_"]').hide();
    $('#content_' + id).show();
});

Answer 3

<强> MARKUP：

<ul class="navigation">
  <li name="section1" id="link1">ABOUT</li>
  <li name="section2" id="link2">WHY HIRE ME</li>
  <li name="section3" id="link3">JOURNEY</li>
  <li name="section4" id="link4">INSTAGRAM</li>
  <li name="section5" id="link5">CONTACT</li>         
</ul>

<div class="section" id="section1">section1</div>
<div class="section" id="section2">section2</div>
<div class="section" id="section3">section3</div>
<div class="section" id="section4">section4</div>
<div class="section" id="section5">section5</div>

<强> CSS：

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

<强> JS：

$('.navigation li').on('click', function() {
  $('.section').hide(); //hide all sections
  var whichSection = $(this).attr('name'); //get the section name 
  $('#'+whichSection).toggle(); //toggle it
});

<强>的jsfiddle
http://jsfiddle.net/neuroflux/LwQNR/2/

删除元素并通过.click将其恢复

3 个答案: