YUI菜單更改頁面內容而不是整個頁面
[英]YUI menu change page content not whole page
問題描述
我將html頁面分為：
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
選擇菜單項時，我想更改“內容” div的內容。 即，取決於菜單項的選擇，div的內容應該改變，就像在Tabviews中發生的一樣。 我該怎么辦？
2 個解決方案
解決方案1
1 2013-02-20 14:14:20
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>
解決方案2
0 已采納 2013-02-20 12:22:32
這應該可以解決問題：
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');
更改 $_Get 值而不重新加載整個頁面內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.