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/

e.g。

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

Answer 2

也许你可以使用你所描述的jquery-ui标签。它非常易于使用。

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

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

2 个答案: