在项目的前端页面里,对应菜单对应内容选项卡。这种效果实现的方式有很多种,下面是使用 JQuery 实现的一种方式:
<div class="box">
<ul class="tabNav1">
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<ul class="tabCon1">
<li>选项1内容</li>
<li>选项2内容</li>
<li>选项3内容</li>
</ul>
</div>
fnTab( $('.tabNav1'), $('.tabCon1'), 'mouseover' );//鼠标移动触发
fnTab( $('.tabNav2'), $('.tabCon2'), 'click' );//点击触发
function fnTab( oNav, aCon, sEvent ) {
var aElem = oNav.children();
aCon.hide().eq(0).show();
aElem.each(function (index){
$(this).on(sEvent, function (){
aElem.removeClass('active').addClass('gradient');
$(this).removeClass('gradient').addClass('active');
aCon.hide().eq( index ).show();
});
});
}