0

HTMLページを次のように分割しました：

<body>
    <div class="menu_container">
        <!-- added menu here -->
    </div>
    <div class="content">
        <!-- body content here -->
    </div>
</body>

メニュー項目選択時の「コンテンツ」divの内容を変更したい。つまり、メニュー項目の選択に応じて、Tabviews のように div コンテンツが変更されます。どうすればそうできますか？

4

2 に答える 2

1

YUIの最新バージョンには、履歴とAjaxを使用してページを更新するPjaxの概念が含まれています。設定は本当に簡単で、URLを機能させ続けることができます。ユーザーガイドを確認してください：http：//yuilibrary.com/yui/docs/pjax/。

ページを更新する各メニューにクラスを追加しyui3-pjax、Menuプラグインを適用し、Pjaxプラグインをプラグインして、サーバーに適切なHTMLコンテンツを返すようにするだけです。

<div id="menu-1" class="yui3-menu">
  <div class="yui3-menu-content">
    <ul>
      <li class="yui3-menuitem">
        <a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
      </li>
    </ul>
  </div>
</div>
<div id="content">
  <!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
  Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
  Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
于 2013-02-20T14:14:20.467 に答える
0

これでうまくいくはずです：

Y.one('.menu_container').on('click', function(e) {
  Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});

menu_container の代わりに使用されるセレクターに応じて、それに応じてコンテンツを更新できます。

編集:実際、デリゲートはおそらくあなたのニーズに適しています:

Y.one('.menu_container').delegate('click', onClick, '.menu-item');

http://jsfiddle.net/olan/w2jfh/

于 2013-02-20T12:22:32.180 に答える