Question

我将html页面划分为：

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

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

Answer 1

YUI的最新版本包括Pjax的概念，它使用History和Ajax来更新页面。设置起来非常简单，它可以保持您的网址正常运行。查看用户指南：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>

Answer 2

这应该可以解决问题：

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/

YUI菜单更改页面内容而不是整页

2 个答案: