YUI菜單改變網頁內容而不是整個頁面

我有分歧的HTML頁面爲：YUI菜單改變網頁內容而不是整個頁面

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

我想，當我選擇菜單項來更改「內容」 div的內容。即取決於菜單項選擇div內容應該改變，就像在Tabviews中發生的一樣。我該怎麼做？

來源

2013-02-20 amrit_neo

這應該做的伎倆：

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-20 12:22:32 olan

YUI的最新版本包括Pjax的，它使用的歷史和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>

來源

2013-02-20 14:14:20 juandopazo

YUI菜單改變網頁內容而不是整個頁面

回答

相關問題