JavaScript实现多栏目切换效果

在网站开发中尤其是新闻类网站，经常遇到多栏目切换的设计，这种效果有很多种实现效果，现在记录一种很简单的写法：

风格news _ wrap { width : 380 pxheart : 266 px向左浮动：左边距left: 15px}。news _ head { width : 380 pxborder-bottom : 2px实心# dededeheight: 51px线高： 51px} .tabList ul li{左侧浮动：光标：指针；字体粗细：粗体；文本对齐：中心；font-size : 16px宽度： 72px} .cli1 { color : # 3a 7 AAF；边框-底部： 2px实心# 3a 7 AAF；} .更多{ font-size : 14pxcolor: # 9a9a9a向右浮动：字体粗细：正常；填充-右侧： 0;} .tabCon { width : 376 pxpadding-top : 13px；飞越：隐藏；}/style div class=' news _ wrap ' div class=' news _ head ' div class=' tabList ' ul Li class=' cli1 ' id=' P1 ' on mouseover=' return swap _ tab(1)'工作动态/Li Li class=' cli2 ' id=' p2 ' on mouse over=' return swap _ tab(2)'媒体链接/Li Li class=' cli2 ' id=' P3 ' on mouse over=' return swap _ tab(3)'领导活动/Li/ul/div class=' more ' div id=' J1 '工作动态_ more/div div id=' J2 ' style=' display : none；' 媒体链接_ more/div div id='JBOY3乐队' style=' display : none'领导活动_ more/div/div/class=' Tabcon ' div id=' n1 ' Li工作动态_list/li li工作动态_list/li li工作动态_ list/Li/div div id=“”style=“display : none；”里媒体链接_list /li li媒体链接_list /li li媒体链接_ list/Li/div div id=' n3 ' style=' display : none；'里领导活动_list /li li领导活动_list /li li领导活动_ list/Li/div/div脚本函数swap_tab(n){ //鼠标触发事件for(var I=1；i4；I){ var curC=document。getelementbyid(' n ' I)；var CurB=文档。GetElementBYID(' p ' I)；var mores=文档。getelementbyid(' j ' I)；if(n==I){ curc。风格。display=' blockcli1mores .风格。display=' block} else { curc。风格。显示='无'；curB.className=' cli2mores。风格。显示='无'；} } }/脚本以上所述是小编给大家介绍的Java脚本语言实现多栏目切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！