页面部分显示与显隐控制

有的时候页面需要根据点击内容选择显示的部分，而不是根据点击内容重新加载页面。

1 vm中利用section分割显隐部分

    <section class="itemA" id="itemA">

   </section>

  <section class="itemB" id="itemB">

   </section>

  <section class="itemC" id="itemC">

   </section>

定义3个点击

            <li class="item ClickA">显示A</li>
            <li class="item ClickB">显示B</li>
            <li class="item ClickC">显示C</li>

2 在加载的js中控制显隐

    2.1 定义变量 

     var nA = Y.one('#itemA');
     var nB = Y.one('#itemB');
     var nC = Y.one('#itemC');

    2.2 定义显隐方式

    function showA(){
    nA .setStyle('display','block');
         nB .setStyle('display','none');
         nC .setStyle('display','none');
    }
    function showB(){
     nA .setStyle('display','none');
         nB .setStyle('display','block');
         nC .setStyle('display','none');
    }
    function showC(){
         nA .setStyle('display','none');
         nB .setStyle('display','none');
         nC .setStyle('display','block');
    }

    2.3 点击事件中添加控制

     Y.one('.ClickA').on('click',function(){
    showA();
     })
     Y.one('.ClickB').on('click',function(){
      showB();
     })
     Y.one('.ClickC').on('click',function(){
    showC();
    })

  3 在css中设置页面加载时初始化的样式

      #itemB{
display:none;
      }
      #itemC{
display:none;
      }