Search code examples
javascriptyui

YUI menu change page content not whole page

I have divided html page into :

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

I want to change the content of "content" div when I select menu item. ie depending on menu item selection div content should change, like what happens in Tabviews. How can I do so?

Solution

  • This should do the trick:

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

    Depending on the selector used instead of menu_container, you can update the content accordingly.

    EDIT: In fact, delegate is probably better for your needs:

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

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