删除元素并通过.click将它们带回 [英] removing elements and bringing them back via .click

问题描述

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

 < ul class =navigation> 
< li id =link1>关于< / li> 
< li id =link2> WHY HIRE ME< / li> 
< li id =link3> JOURNEY< / li> 
< li id =link4> INSTAGRAM< / li> 
< li id =link5>联络< / li> 
< / ul> 
  

我用下面的CSS设计了这个列表，所以它保持固定在浏览器的左侧窗口。

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

但我很失败。我最理想的是在网站打开时显示第1部分。剩下的要隐藏起来。当用户点击一个链接时，我希望能够隐藏与该链接关联的部分以外的所有部分。

我用.click看过并尝试了.remove / .appendTo函数，但我挣扎着

解决方案

像这样的HTML结构

 < div id =content_1>关于内容< / div> 
< div id =content_2> Why Hire Me content< / div> 
 ... 
  

而这个jQuery

$ b $ （'click'，function（）
{
var id = $（this）.attr（）。$ b pre> 'id'）。substr（$（this）.attr（'id'）。indexOf（'_'）+1）;

'（'div [id ^ =content_]' ）.hide（）;
$（'＃content_'+ id）.show（）;
}）;


I am trying to build a website using just the one page. I have created 5 <section> I am using these sections as my pages. I have a nav on the right hand side which is fixed. Using the following:

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

I have styled that list with the following CSS so it stays fixed to the left hand side of the browser window.

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

I have tried my hand at some jQuery but I am FAILING badly. What I'd ideally like is for section 1 to be displayed when the site opens. And for the rest to be hidden. When a user clicks a link, I would like that to hide all sections apart from the section the link is associated with.

I have looked at and tried the .remove / .appendTo functions with the .click but I am struggling

解决方案

Something like this HTML structure

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

And this jQuery

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

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

这篇关于删除元素并通过.click将它们带回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！