0

我正在尝试仅使用一页来构建网站。我创建了 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 功能，但我很挣扎

4

3 回答 3

1

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

你可以使用它：

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

为了做一个完整的小组，我会为他们提供一个通用的 css 类（即使该类没有附加任何样式）：

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

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

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

于 2012-10-12T12:09:41.233 回答
1

像这样的 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();
});
于 2012-10-12T12:10:08.650 回答
0

标记：

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

于 2012-10-12T12:12:13.167 回答