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

我有

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>

搜索


播放列表


设置


队列

当我单击任何按钮时，与该单击相关的内容将显示在

但目前，我只是执行

jQuery.load（）

并清除

劣势？

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

我想要什么？

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

• 我不知道如何使用jQuery实现这一点，我对它非常陌生

请让我知道我能做什么来实现上述目标

---

提前感谢您

也许您可以使用您描述的jquery ui选项卡。它很容易使用

---

您可以使用UL和LI来定义选项卡按钮，并使用div列表来定义每个选项卡页面。有一些命名约定，但其余的由jquery ui处理。

根据您的描述，也许您可以使用jquery ui选项卡。它很容易使用

---

您可以使用UL和LI来定义选项卡按钮，并使用div列表来定义每个选项卡页面。有一些命名约定，但其余的由jquery ui处理。

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

e、 g

---

一种可能的解决方案是使用hide（）和show（）函数，它们不修改DOM

e、 g

---

我喜欢这个想法，并在我的

HTML

和

Javascript（jQuery）

周围徘徊，它似乎奏效了，感谢@tpolyak为我指引了正确的方向。我喜欢这个想法，并在

HTML

和

Javascript（jQuery）

周围徘徊，它似乎奏效了，感谢@tpolyak为我指引了正确的方向

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