javascript - 如何隐藏重叠的div而不删除内容

Question

我有home.html其中有以下div

<div id="feature" class="feature">
</div>

我有 n 个不同的按钮显示为

         <button id="search" class="btn btn-large navigator-button navigator-icons">
                <i class="icon-search icon-large"></i>
                search
            </button>
          </li>
          <li>
            <button id="playlist" class="btn btn-large navigator-button navigator-icons">
                <i class="icon-list icon-large"></i>
                playlists
            </button>
          </li>
          <li>
            <button id="settings" class="btn btn-large navigator-button navigator-icons">
                <i class="icon-cog icon-large"></i>
                settings
            </button>
          </li>
          <li>
              <button id="queue" class="btn btn-large navigator-button navigator-icons">
                  <i class="icon-cog icon-play-circle"></i>
                  queue
              </button>

当我单击任何按钮时，与该单击关联的内容将显示在 <div id="feature" class="feature"> 中

但目前，我只执行jQuery.load()并清除 <div id="feature"> 下存在的任何内容

缺点？

• 我每次都会构建这些页面
• 我不保留之前页面的状态，例如用户搜索的搜索结果

我想要什么？

• 我需要一种方法，以便根据页面的点击，加载与当前点击关联的页面，同时隐藏与其他按钮点击对应的其他页面

• 我不知道如何使用 jQuery 做到这一点，我对它很陌生

请让我知道我能做些什么来实现上述目标 预先感谢您

Answer 1

一个可能的解决方案是使用 hide() 和 show() 函数，它们不会修改 DOM。

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

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

例如

$('#feature .content1').hide();
$('#feature .content2').show();