1

我有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 做到这一点，我对它很陌生

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

4

2 回答 2

1

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

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

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

例如

$('#feature .content1').hide();
$('#feature .content2').show();
于 2012-08-25T20:49:11.237 回答
0

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

您使用 UL 和 LI 来定义标签按钮，并使用 DIV 列表来定义每个标签页。有一些命名约定，但其余的由 jquery-ui 处理。

于 2012-08-25T20:39:13.330 回答