有的时候页面需要根据点击内容选择显示的部分,而不是根据点击内容重新加载页面。
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.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;
}