0

我将html页面分为：

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

当我选择菜单项时，我想更改“内容”div 的内容。即取决于菜单项选择 div 内容应该改变，就像在 Tabviews 中发生的那样。我该怎么做？

4

2 回答 2

1

最新版本的 YUI 包含了 Pjax 的概念，它使用 History 和 Ajax 来更新页面。它非常容易设置，并且可以让您的 URL 正常工作。查看用户指南：http: //yuilibrary.com/yui/docs/pjax/。

您只需将yui3-pjax类添加到更新页面的每个菜单、应用菜单插件、插入 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 回答