//jQ版本 $(function(){ var _tab=$('ul.tabnav>li');//获取选项卡导航 var _box=$('.tabbox div');//获取内容切换区 var _hover='hover';//当前点击显示的样式 var _index;//索引值 _tab.eq(0).addClass(_hover);//第一个导航高亮显示 _tab.click(function(){ _index=_tab.index(this);//获取当前点击的索引值 $(this).addClass(_hover).siblings().removeClass(_hover);//当前点击高亮显示 _box.eq(_index).show().siblings().hide();//通过索引值让对应的选项内容区显示 }).eq(0).click(); });
//原生JS版本
复制代码 代码如下:
window.onload=function(){ var tabnav=document.getElementById('tabnav'); var list=tabnav.getElementsByTagName('li'); var tabbox=document.getElementById('tabbox'); var divs=tabbox.getElementsByTagName('div'); var hover='hover';//当前点击显示的样式 var indexValue=function(self,obj){//获取索引值的函数,通过它获取当前点击在导航中的索引位置 for(var i=0;i<obj.length;i++){ if(obj[i]==self) return i; } }; var index; list[0].className=hover;//第一个默认高亮,建议在页面中直接定义 for(var k=1;k<divs.length;k++){//我为了省事,用一个for循环定义默认显示第一个切换区块,其他隐藏.这个最好用CSS定义,能避免页面加载时它全部显示出来. divs[k].style.display='none'; } for(var l=0;l<list.length;l++){//点击事件 list[l].onclick=function(){ index=indexValue(this,list);//利用前面定义的indexValue函数取当前点击在选项导航中的索引值, for(var m=0;m<list.length;m++){ list[m].className= (m==index) ? hover : '';//高亮显示点击项并移除其他项高亮 } for(var n=0;n<divs.length;n++){ divs[n].style.display= (n==index) ? 'block' : 'none';//显示点击对应的选项区,隐藏其他 } } } }